Menu
I'm working on moving from using tables for layout purposes to using divs (yes, yes the great debate). I've got 3 divs, a header, content and footer. The header and footer are 50px each. How do I get the footer div to stay at the bottom of the page, and the content div to fill the space in between? I don't want to hard code the content divs height because the screen resolution can change.
914
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
Go to ATO>Style & edit Footer and cut all the formatting out of the Footer Style box. Now Go to ATO>Add HTML/CSS Inserts>CSS Inserts and past in into that box with a selector of td#footer p and add a top margin. It would look something like the following.
In case you want additional space ( more than the default ) between div rows then you can add the following code before/after the start of the div row depending on where you want the additional space. This is easier but will add a fixed amount of gap.
Using flex layout we can achieve this while allowing for natural height header and footer. Both the header and footer will stick to the top and bottom of the viewport respectively (much like a native mobile app) and the main content area will fill the remaining space, while any vertical overflow will be scrollable within that area.
See JS Fiddle
HTML
<body> <header> ... </header> <main> ... </main> <footer> ... </footer> </body> CSS
html, body { margin: 0; height: 100%; min-height: 100%; } body { display: flex; flex-direction: column; } header, footer { flex: none; } main { overflow-y: scroll; -webkit-overflow-scrolling: touch; flex: auto; } 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
