vertical layout ( header - menu - content - bottom )

I'm changing Flex for HTML / CSS / Javascript but I'm finding some difficulties on my way.

Would be great if I could create the same liquid layouts and xbrowser ( yes... I know ) :)

I followed the next tutorial: h开发者_JAVA技巧ttp://www.cssplay.co.uk/layouts/flexible-3column-fix-flex-fix.html

But there is only on thing is killing me, the footer. Can I stack it to the bottom making the content 100% ?

Thanks!!!!

---

You could try a solution like this: http://jsfiddle.net/steweb/wfmGN/

I used this trick for lots of websites and I'm satisfied :D

markup:

<div id="wrapper">
    <div id="footer">I'm da foota</div>
</div>

css:

body, html{
    height:100%;
    padding:0;
    margin:0;
}
#wrapper{
    min-height:100%;
    position:relative;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100px;
    background:#DEDEDE;
}

---

You can use the sticky footer method that you can find here http://www.cssstickyfooter.com/

---

Because of the quirks of CSS, it is very difficult to get the content above your footer to be the 100% that you expect. Most browsers will render it as 100% of the window height, not the remaining space between the header and footer. And as that height can differ greatly, you can't use a catch-all on it.