Menu
______________________ | Header | |______________________| | | | | | Content | | | | | |______________________| | Footer | |______________________| I would like to make this UI, and each is a div. The header height is 30px. And the footer is 30px. But I don't know the content height. I need to use the user frame to calculate.
The total height should be 100%.
Can I do it in pure CSS?
378
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.
To customize the header elements using the CSS properties, we can change the font size of header text using font-size property, change the background color of the header container using background-color property, set the width and height of the header container, add padding between the header components and so on.
Using flexbox, this is easy to achieve.
Set the wrapper containing your 3 compartments to display: flex; and give it a height of 100% or 100vh. The height of the wrapper will fill the entire height, and the display: flex; will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.
Example markup:
<div class="wrapper"> <header>I'm a 30px tall header</header> <main>I'm the main-content filling the void!</main> <footer>I'm a 30px tall footer</footer> </div> And CSS to accompany it:
.wrapper { height: 100vh; display: flex; /* Direction of the items, can be row or column */ flex-direction: column; } header, footer { height: 30px; } main { flex: 1; } Here's that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left
You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/
Or find a well made documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
--[Old answer below]--
Here you go: http://jsfiddle.net/pKvxN/
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Layout</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> header { height: 30px; background: green; } footer { height: 30px; background: red; } </style> </head> <body> <header> <h1>I am a header</h1> </header> <article> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor. </p> </article> <footer> <h4>I am a footer</h4> </footer> </body> </html> That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)
194
Here is how to to that:
The header and footer are 30px height.
The footer is stuck to the bottom of the page.
HTML:
<div id="header"> </div> <div id="content"> </div> <div id="footer"> </div> CSS:
#header { height: 30px; } #footer { height: 30px; position: absolute; bottom: 0; } body { height: 100%; margin-bottom: 30px; } Try it on jsfiddle: http://jsfiddle.net/Usbuw/
29
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
