I've created the following code snippet on JSFiddle. https://jsfiddle.net/msridhar/1zvhmpjq/11/ HTML file:
<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')
The HTML file loaded through Javascript is as follows:
<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">
I've inserted an HTML page into a div tag with the ID results. Even though the div has overflow-auto enabled, it's not displaying the entire content when scrolled. Can someone please help me identify the issue?