I'm currently facing a challenge in creating a webpage that requires a normal header, sticky footer, and fluid body content stretched vertically without using absolute positions due to a page min-height requirement of 780px.
While I managed to achieve this using tables, I am keen on avoiding them and also want to steer clear of JavaScript or jQuery. The sticky footer should remain fixed until the minimum height is reached.
I have tried implementing the typical sticky footer layout with the pusher element but encountered issues when setting the main content's height to 100% (likely due to a bug with the wrapper's height: auto property).
Here's an example image illustrating the desired outcome:
Feel free to refer to my current progress on JS Fiddle: http://jsfiddle.net/6qatg/
The provided code snippet:
<body>
<table class="wrapper">
<tr><td id="topBar" class="topBar">
</td></tr>
<tr><td valign="top" id="mainContent" class="mainContent">
</td></tr>
<tr><td class="footer" id="footer">
</td></tr>
</table>
</body>
html{
min-width: 790px;
min-height: 300px;
font-family: 'Open Sans', sans-serif;
height: 100%;
}
body{
font-family: 'Open Sans', sans-serif;
/*border: 2px solid black;*/
height: 100%;
min-height: 300px;
min-width: 790px;
}
*{
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
.footer {
height: 35px;
background-color: #00F8FD;
width: 100%;
}
.topBar{
height: 75px;
width: 100%;
background-color: #00F8FD;
}
.mainContent{
background-color: #EEF8FD;
height: 100%;
}
Your help and insights are greatly appreciated.