div在html页面中没有完全显示其内容

-1

我在JSFiddle中编写了下面的代码。 https://jsfiddle.net/msridhar/1zvhmpjq/11/ HTML文件：div在html页面中没有完全显示其内容

<body> 
<div id="headerDiv"> 
     <img id="headerImg" src="" width="280" height="125" alt="DummyLogo"/> 
     <pre id="headerPre"> 
       Test Series 
     Cloud Solutions 
     </pre>     
     <hr id="headerHR"> 
    </div>        
     <div id="results"> 
     </div>  
</body>

CSS：

html, body { 
     margin: 0; 
     padding: 0; 
     height: 100%;      
    overflow: hidden; 
    } 
    body{ 
    position: relative; 
    } 
     #results{   
    width: 100%;   
    height: 100%; 
     position: absolute; 
     top: 150px; 
     left: 300px;  
     overflow: auto; 
     } 
     body{ 
     position: relative; 
     }    
     #headerDiv{  
      position: fixed; 
      top: 0; 
      width: 100vw;    
      //border-bottom: 3px solid #808080; 
     } 
     #headerHR{            
      width: 100%; 
      height: 1px; 
     } 
     #headerImg{ 
      float: left; 
      margin-top: 0px; 
      margin-left: 0px; 
     } 
     #headerPre{ 
      float: left; 
      font-family: "Arial", Helvetica, sans-serif; 
      font-style: normal; 
      font-weight: bold; 
      font-size: 24px; 
     }

的Javascript：

$('#results').load('https://fiddle.jshell.net/ds2vxqbg/1/show')

JavaScript中加载HTML文件中的代码是：

<table border="1"> 
     <tr> 
     <th>Product no.</th> 
     <th>Product name</th> 
     <th>Product type</th> 
     <th>Product Description</th> 
     </tr> 
     <tr> 
     <td>1</td> 
     <td>Apple</td> 
     <td>Fruit</td> 
     <td>Its a fruit</td> 
     </tr> 
     <tr> 
     <td>2</td> 
     <td>Orange</td> 
     <td>Fruit</td> 
     <td>Its a fruit</td> 
     </tr> 
     <tr> 
     <td>3</td> 
     <td>Pineapple</td> 
     <td>Fruit</td> 
     <td>Its a fruit</td> 
     </tr> 
     <tr> 
     <td>4</td> 
     <td>Pear</td> 
     <td>Fruit</td> 
     <td>Its a fruit</td> 
     </tr> 
     <tr> 
     <td>5</td> 
     <td>Plum</td> 
     <td>Fruit</td> 
     <td>Its a fruit</td> 
     </tr> 
    </table>   
    <img src="" width = "800" height = "600"> 
    <img src="" width = "800" height = "600"> 
    <img src="" width = "800" height = "600"> 
    <img src="" width = "800" height = "600">

我已经在带有ID结果的div标签中加载了一个html页面。虽然该div标记已启用自动溢出，但滚动时不会显示整个内容。请指出我有什么问题。

来源

2016-06-13 Mat

您好！我试过你的JSFiddle，我可以滚动并看到div内的所有内容（我也仔细检查了你正在加载的链接）。但是我认为你的div是从'html，body'标记继承'overflow：hidden;'，或者你从'html，body'中移除它，或者向div的CSS添加一个'！important'。 – Luke

还缺少什么？我看到表格显示在小提琴 – Roysh

上，如果你的意思是4个img标签，我把一个边框放在飞行广告上我可以看到所有的4 – rick

#results由body {overflow:hidden;}中断，因为div将宽度和高度设置为100％的身体，但它有额外的偏移量。

你可以尝试下做：

HTML：

<body> 
    <div id="headerDiv"> 
     <img id="headerImg" src="" width="280" height="125" alt="DummyLogo"/> 
     <pre id="headerPre"> 
      Test Series 
      Cloud Solutions 
     </pre>     
    <hr id="headerHR"> 
    </div> 
    <div id="wrapper"> <!-- add wrapper --> 
     <div id="results"></div> 
    </div> 
</body>

和css：

#wrapper { 
    padding-top: 150px; 
    padding-left: 300px; 
    width: 100%; 
    height: 100%; 
    box-sizing: border-box; 
} 

#results { 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
}

来源

2016-06-13 15:52:55 Dekart

谢谢你的精彩作品... – Mat

div在html页面中没有完全显示其内容

回答

相关问题