Over the years, I've struggled with this. This year, there might be a solution. I need a header, content and footer. I would like the footer to be at the bottom of the page, the header at the top, and the content in between.
I would like the content to have a scroll bar.
Q: Is that too much to ask?
I'm not entirely sure whether this really answers your question but the property for getting a scroll bar if necessary (i.e. if a container's content exceeds its size) is
overflow: auto
there are selective properties for horizontal and vertical scroll bars:
overflow-x: auto;
overflow-y: auto;
but they are part of the CSS 3.0 specification and only supported by a limited number of browsers (namely Firefox > 1.5, Opera and Safari).
If you want just the content to scroll, you can have a fixed header and footer. That's the only way I know of. Check out this link for implementation hints:
This give you a fixed header and footer of height 50 px, and a content area that is scrollable.
<html>
<body>
<div id="header" style="position:absolute; left:0px; top:0px; height: 50px; overflow:hidden">
</div>
<div id="content" style="position:absolute; left:0px; top:50px; bottom:50px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; left:0px; bottom:0px; height:50px; overflow:hidden;">
</body>
</html>
If the header and footer have fixed heights:
<style type="text/css">
#header {
height: 100px;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: red;
}
#footer {
height: 100px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background-color: green;
}
#content {
width: 100%;
position: absolute;
left: 0;
top: 100px;
bottom: 100px;
overflow: auto;
background-color: blue;
}
</style>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>