Menu
How can I get fixed header, footer with scrollable content? Something like this page. I can look at the source to get the CSS, but I just want to know minimum CSS and HTML I need to get this working.
620
Create a Table That Has a Fixed Header. We can create an HTML table that has a fixed header with some CSS. We set the height of the table element to 120px to make restrict the height of it so we can make it scrollable. To make it scrollable, we set the overflow CSS property to scroll .
Answer: Use CSS fixed positioning You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.
Something like this
<html> <body style="height:100%; width:100%"> <div id="header" style="position:absolute; top:0px; left:0px; height:200px; right:0px;overflow:hidden;"> </div> <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; right:0px; overflow:auto;"> </div> <div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;"> </div> </body> </html> If you're targeting browsers supporting flexible boxes you could do the following.. http://jsfiddle.net/meyertee/AH3pE/
HTML
<div class="container"> <header><h1>Header</h1></header> <div class="body">Body</div> <footer><h3>Footer</h3></footer> </div> CSS
.container { width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; } header { flex-shrink: 0; } .body{ flex-grow: 1; overflow: auto; min-height: 2em; } footer{ flex-shrink: 0; } Update:
See "Can I use" for browser support of flexible boxes.
33
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
