在 DIV 标记中加载的 HTML 仅部分显示

Question

我有以下代码

CSS

.photo_types {
    position:relative;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    background-color:gray;
    text-align:left;
    font-weight:bold;
    margin:0% auto;
}

HTML

<div id="photo_types" class="photo_types">
<img src="images/ystone_burnt_tree.jpg" />

---

上面的代码是通过下面代码中的 Javascript 加载的

---

CSS

  .mySelfStyle {                          
    position:absolute;       
    top:3.5%;                                         
    left:1%;                                                                                  
    width:80%;                                                                                
    height:90%;                               
    background-color:black;
    text-align:center;                                 
  }

  .photogMainStyle {                                                    
    position:absolute;                                 
    top:3.5%;                                
    left:1%;                                        
    width:80%;                                      
    height:90%;                     
    background-color:black;                             
  }                                                

HTML

   <div id="myself_panel">                                                                      
   <img id="myself_panel_img" src='images/ystone_burnt_tree.jpg' />
   <p style="color:white;"> The Most Beautiful Place I have been To </p>             
   </div>                                       

   <div id="photo_panel">      
   </div>                                                            

JS

   function showMyPhotography() {                  
     itemObj = document.getElementById('myself_panel');
     itemObj.className = 'hiderStyle';                          
     itemObj = document.getElementById('photo_panel');                                          
     itemObj.className='photogMainStyle';                                                       
     /*             
     itemObj.load("photo_panel.html");
     */                                                            
     itemObj.innerHTML='<object type="text/html" data="photo_panel.html"> </object>';
   }     

我遇到的问题是加载的 photo_panel.html 没有使用 div photo_panel 中的所有空间。它只使用了部分空间。

Answer 1

您需要设置要添加的对象标签的高度和宽度

#photo_panel object
{
  height:100%;
  width:100%;
}

Plunker Sample