My minimalist design includes a header, main section, and footer. The footer is positioned at the bottom of the page while I want the main section to fill the space between the header and footer.
Take a look at my approach here: http://jsfiddle.net/5d3m9/
HTML
<div class="wrap">
<header>header</header>
<div class="main">lorem2000 </div>
<div class="clear"></div>
<footer>@Copyright</footer>
</div>
CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
header {
height: 150px;
background: orange;
}
.wrap {
min-height: 100%;
position: relative;
overflow: hidden;
}
.main {
background: #00eaea;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
.clear {
height: 50px;
}
footer {
background: #dadada;
height: 50px;
width: 100%;
position: absolute;
bottom: 0;
}
Are there alternative or more effective methods to achieve this layout without using
padding-bottom: 32767px; margin-bottom: -32767px;