Imagine this document:
<!doctype html>
<head>
<title>Leak</title>
</head>
<body>
<div id="container">
<div id="main">
<ul>
<li>a</li>
<li class="b">b</li>
<li>a</li>
<li class="b">b</li>
<li>a</li>
</ul>
</div>
<div id="footer">
<div>Footer</div>
<div style="height: 50px; width: 50px; background: red"/>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</body>
</html>
Open it in chrome of firebug and you will see, that there is some kind of unexplained margin-top on the body element. It comes from the ul element, two levels deeper. I think this is kind of an eery behavior, but I am certain those wc3 guys who came up with that have had their good reasons.
But how, can I get to that in javascript? I need to set the #main div’s height to $(window).height() – $(‘#footer’).height(), so it that #footer is always at the bottom.
$('#main').height($(window).height() - $('#footer').height())
But this leaves a scrollbar, because of this space on top. Try removing the ul and everything is as expected. How can I account for this? This is for a plugin, so I cannot account for special markup, this should “just work”.
It works by setting “overflow: auto” to the stretched div, in this case #main. It is not a javascript solution, but is somewhat acceptable. I can let the user decide if this fix should be applied or he can take care of this elsewise.