Menu
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?
872
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>
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).
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
