Menu
I've looked on here and on various tutorial but can't the effect I need.
So if the page content is less high than 600px I want the footer fixed below a container that is that height.
But if the content increases the container height to beyond 600px then the footer should be pushed down the page by the container.
I've tried using min-height to avail, my html look like this
<body>
<div id="shell">
<div id="container">
Content
</div>
<div id="footer">Footer</div>
</div>
</body>
I won't bother posting the CSS as it just doesn't come close.
309
You can do this by CSS Trick,
/* CSS Code */
body, html{
padding:0;
margin:0;
height:100%;
}
.wrapper{
min-height:100%;
position:relative;
}
.container{
width:960px;
margin:0 auto;
padding-bottom:100px;
}
.header{
height:100px;
background-color:#066;
}
.footer{
position:absolute;
bottom:0;
height:100px;
background-color:#006;
width:100%;
}
<div class="wrapper">
<div class="container">
<div class="header">
Header
</div>
<div class="body">
</div>
</div>
<div class="footer">
Footer
</div>
</div>
Here is my Fiddle File
88
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
