Let's discuss the problem at hand: I have an HTML code snippet:
<div id="container">
<div id="fixedImg"></div>
<div id="content" class="clearfix">
asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
df<br />asdf <br /> asdf <br />
</div>
</div>
In addition, here is the associated CSS:
#container {
width: 990px;
margin-right: auto;
margin-left: auto;
padding-top:14px;
}
#fixedImg {
float: left;
width: 300px;
background-image: url(../images/pageBg.jpg);
background-repeat: repeat-y;
}
#content {
float: left;
width: 690px;
border-bottom: solid #000 1px;
background-color:#CC0000;
overflow:auto;
}
However, when viewing it in browsers such as Internet Explorer and Chrome, the content in the 'Content' div is overflowing.
The height of the Content div is dynamically adjusted based on window height (accurately done using a JavaScript function). The text/content should be scrollable with a scrollbar.
RESOLUTION:
The issue was with my JavaScript function, specifically where I was setting the height for the 'Content' div. Originally, I was assigning minHeight instead of just height. The corrected line of code is shown below:
document.getElementById('content').style.height = ht;
After this correction, everything functions correctly. Here is the JavaScript function used to calculate the screen:
<script language="javascript">
function getscreenInfo () {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
ht = y - 197;
y += "px";
document.getElementById('footer').style.top = y; // this will keep the 'footer' div below the visible screen. User will look at it only if he scrolls down to the bottom.
ht += "px";
//alert(ht);
//alert (document.getElementById('footer').style.top);
document.getElementById('fixedImg').style.height = ht;
document.getElementById('content').style.height = ht;
}
</script>