Hi,
I would like to layout a page so that it looks like it is frames based,
but it is entirely done with divs. Specifically, I would like to have a div,
say 100px high at the bottom of the screen, with the top of the screen (the
rest) a scrollable div.
Using the (incorrect) box model of Internet Explorer 5.5, that can be done
like this:
<html>
<head>
<title> test </title>
<style>
BODY {
margin: 0px;
}
.full {
position: relative;
height: 100%;
overflow: hidden;
}
.top {
height: 100%;
}
.bottom {
position: relative;
height: 100px;
top: -100px;
background-color: red;
}
.content {
height: 100%;
border-bottom: 100px solid blue;
overflow: auto;
}
</style>
</head>
<body scroll="no">
<div class="full">
<div class="top">
<div class="content">
content<p>content<p>content<p>content<p>
content<p>content<p>content<p>content<p>
</div>
</div>
<div class="bottom">
bottom
</div>
</div>
</body>
</html>
This works because Internet Explorer uses the area occupied by the border,
padding and content of a div to calculate the height and width. So setting
the height of a div to 100%, and the bottom border to 100px, neatly limits
the content and padding part to the full window, minus 100px, and thus shows
the scrollbar in the correct place with the correct height.
However, since mozilla uses the content region with the padding size to
calculate the size of a div, there is no longer any way, as far as I can
see, to do this, the scrollbar will still be draw over the full length of
the browser window, so that the bottom part is hidden by the bottom div.
Is there any way to overcome this in Mozilla?
Regards,
Auke van Slooten
