Menu
I've been away from marking up sites for some time. So, now we have HTML5 and a lot of new features in CSS. I have a common site layout with fixed size header and footer. And of course main content area in between. By default page should take 100% of window height (i.e. content area expands). And if content is long page vertical scrollbar appears and all like usual. Usually I used to do it by something like this:
<body>
<table id="main" ...>
<tr>
<td id="header-and-content">
<div id="header">contains logo, nav and has fixed height</div>
<div id="content">actual content</div>
</td>
</tr>
<tr>
<td id="footer">
fixed size footer
</td>
</tr>
</table>
</body>
And accompanying css:
html, body { height:100% }
table#main { height:100% }
td#footer { height:123px }
So, it's obsolete. You, who keeps abreast of new markup techniques, how it is done by now in 2011?
UPD People, issue not about semantic markup or using divs. I know what it does mean. Issue now in - how do I tell footer to stay at bottom even while content is empty or short. When content is long enough footer just go down as it would do in other case. Absolute and fixed is not the solution (at least at its basic form)
SOME SUMMARY UPDATE
Some disappointment though I feel: first method is just those tables but without table tag. The second is really old, I've avoided to use it because it resembles hack. My god, nothing new :)
862
For a responsive full page height, set the body element min-height to 100vh.
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
Well, first of all in 2011 we dont use tables for layout anymore!
If I were you, I would write the markup like so:
<body>
<div id="main" role="main">
<header>
contains logo, nav and has fixed height
</header>
<div class="content"> /*use <article> or <section> if it is appropriate - if not sure what to use, use a div*/
actual content
</div>
<footer>
fixed size footer
</footer>
</div>
</body>
And the CSS would be the same except the changed selectors
html, body { height:100% }
#main { height:100% }
footer { height:123px }
For a fixed footer, I would suggest to use position:absolute or maybe position:fixed - it depends how you want it to behave (scroll with page or always stay at bottom).
To make a "sticky" footer, that will be at the bottom of the page but move with the content, this method will do the trick.
72
In 2013 there is still nothing that beats a decent table that has respectively thead/tfoot/tbody.
The below (valid HTML5 page) is a fixed header and footer, 100% height and NOT ANY resize trouble.
<!DOCTYPE html>
<meta charset="utf-8" />
<title>valid HTML5 / fixed header and footer / nada CSS sizing trouble</title>
<style type="text/css">
html, body, table { height: 100% }
th { height: 80px }
#f { height: 40px }
table { width: 1000px }
html, body { margin: 0 }
table { margin: 0 auto }
td { text-align: left }
html, body { text-align: center } /* important for old browsers */
th { text-align: right }
html, body { background-color: rgb(148,0,211) }
#m { background-color: #f39 }
#m { -webkit-border-radius: 25px;
-khtml-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px; }
</style>
<table>
<thead><tr><th> head</th></tr></thead>
<tfoot><tr><td id="f">foot</td></tr></tfoot>
<tbody><tr><td id="m">main</td></tr></tbody>
</table>
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
