HTML5: Sticky footer, header and article - html

Question

I have a simple page with header, footer and article tags. http://jsfiddle.net/6fmxv/
HTML:
<header>
<div class="social">
<a class="facebook-logo" href="http://www.facebook.com/">
<div id="facebook"></div>
</a>
<a class="youtube-logo" href="http://www.youtube.com/">
<div id="youtube"></div>
</a>
<a class="twitter-logo" href="http://www.twitter.com/">
<div id="twitter"></div>
</a>
</div>
</header>
<article>
<div>Question: Who are you?</div>
</article>
<footer>
<div>
<span></span>
<div>
</footer>
CSS:
html, body {
height: 100%;
margin: 0;
}
header {
height: 24px;
background-color: rgb(19, 147, 107);
}
header .social {
padding-left: 19%;
}
header .social > a > div, footer > div > span {
margin: 0 12px;
float: left;
height: 71px;
width: 50px;
background-image: url(sprites.png);
}
header .social > a > div#facebook {
background-position: -116px -141px;
}
header .social > a > div#youtube {
background-position: -62px -141px;
}
header .social > a > div#twitter {
background-position: -9px -141px;
}
article {
width: 300px;
min-height: 100%;
margin: 0 auto;
}
article > div {
font-size: 3em;
padding-bottom: 150px;
}
footer {
background-color: black;
height: 150px;
position: relative;
margin-top: -150px; /* negative value of footer height */
clear: both;
}
footer > div > span {
background-position: 147px -138px;
height: 133px;
width: 138px;
}
I am trying to make it fluid, such that:
Header sticks to top Done
Footer at bottom Done
There is no scroll bar even when the browser window is resized. Not Done
Article (one line) at the center of the page. Not Done
Please suggest, how to make the text at middle and make the page fluid (without vertical scroll-bar) in this scenario.

Answer 1

What browser support do you need? If you can drop IE9 and below, you can use flexbox:
http://jsfiddle.net/6fmxv/2/
There are a lot of different syntaxes you need to get cross browser support, but it is simple enough.
I'll not include the different syntaxes here, but you can look at the source code.
First you need to enable flexbox on the body, then tell it to use vertical orientation:
body {
height: 100%;
width: 100%; /* fixes bug in Firefox */
margin: 0;
display: flex;
flex-direction: column;
}
Then you need to tell the article to flex its size to take up the remaining space:
article {
flex: 1;
}
Now you just need to center the article. You need to set article to be a flexbox container and then you can add the following declarations to the article rule, to center both in the inline direction (horizontal) and block direction (vertical):
article {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
You need to make article a container, s if you center on the body element, it will also center the header and footer too.