Evgeniy Evgeniy - 5 days ago 8
CSS Question

How to bound a footer to the page bottom with relative parent position?

I'am using bootstrap to create a page layout. My footer bound to the page bottom as described here http://getbootstrap.com/examples/sticky-footer/. This works fine.

But when I'am place a footer inside of container with relative position, I can't to bound footer to the page bottom. Here is example



html,
body{
height:100%;
margin:0;
padding:0;
}

.container{
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}

header{
height:120px;
background-color:#eee;
}

.middle{
background-color:#aaa;
}

footer{
height:120px;
background-color:#888;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div class="container">
<header>
Header
</header>
<div class="middle">
Middle
</div>
<footer>
Footer
</footer>
</div>
</body>
</html>





Is it possible to do it with only CSS?

Answer

you need to add this css code to the footer

footer{
    position: absolute;
    bottom: 0;
    width: 100%;
}

this will position the footer at the bottom of the first parent with a relative position which is in this case the container div

Comments