我在 JSFiddle 中编写了以下代码。 https://jsfiddle.net/msridhar/1zvhmpjq/11/ 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 标签已启用自动溢出，但它在滚动时并未显示全部内容。请指出我的问题是什么。
最佳答案
#results 被 body {overflow:hidden;} chop ，因为 div 将宽度和高度设置为 body 的 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;
}
关于javascript - html页面中的div没有完全显示其内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37793464/