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

Answer 2

感谢大家的回复。以下解决了我的问题。

  .hiderStyle                                                                                   
  {                                                                                             
    clear : both;                                                                               
    display : none;                                                                             
  }

之前我在hiderStyle中没有“clear：both”，我更改了以下功能

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" style="width:100%; heig
     */                                                                                         

     $("#myself_panel").className = 'hiderStyle';                                               
     $("#myself_panel").load("photo_panel.html");                                               
   }

Answer 3

我也有类似的问题。我使用<html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <link href="Untitled-7.css" rel="stylesheet" type="text/css"> </head> <body onLoad="load_page()"> <div id="d1">d1</div> <div id="d2">d2</div> <div id="d3">d3</div> </body> </html> <script> function load_page() { document.getElementById("d1").innerHTML='<object type="text/html" data="page1.html" ></object>'; document.getElementById("d2").innerHTML='<object type="text/html" data="page2.html" ></object>'; document.getElementById("d3").innerHTML='<object type="text/html" data="page3.html" ></object>'; } </script>而不是使用jquery。以下方法解决了我的问题。

HTML

html,body
{ 
    height:100%;
    width:100%;
}

div
{
    height:100vh;
    width:100vw;
}

div object 
{
    height:100vh;
    width:100vw;
}

CSS

{{1}}

希望这会有所帮助：）

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

3 个答案: