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

I have the following code

我有以下代码

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" />

That code above is loaded via Javascript in the code below

上面的代码是通过下面的代码中的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>

   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>';
   }

The problem I am having is that the photo_panel.html which is loaded does not use all of the space in the div photo_panel. It only uses the space partially.

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

3 个解决方案

#1

You need to set the height and width of the object tag you are adding

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

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

Plunker Sample

#2

Thanks for your responses everyone. The following solved my problem.

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

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

Earlier I did not have "clear:both" in my hiderStyle and I changed the function as follows

之前我在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");                                               
   }

#3

I also had a similar problem. I was using <object> instead of using jquery. The following approach solved my problem.

我也有类似的问题。我使用

html

<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>

css

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

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

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

Hope this helps :)

希望这可以帮助 :)

#1