Geek Answers Handbook

CSS: is the footer position absolute or relative depending on the size of the content?

I want to do something like this: enter image description here

In case 1: the content height is less than the window. In case 2: the height of the content is larger than the window - and shows the scroll,

My problem is that the content is dynamically changing. Thus, sometimes .cont is greater than the height of the window. And then, .foot should be lower than .cont.

If I installed this code

<html>
<head>
<style type="text/css">
.cont{
    margin:0 auto;
    background-color:#333;
    width:800px;
    height:500px;
}
.foot {
    position:absolute;
    left:50%;
    margin:0 0 0 -400px;
    background-color:#F33;
    width:800px;
    height:20px;
    bottom:0px;
}
</style>
</head>
<body>
    <div class="cont"></div>
    <div class="foot"></div>
</body>
</html>

I get this: enter image description here

Thanks for any help!

+5
source share
1 answer

If you can change the markup a bit, try the following: http://ryanfait.com/sticky-footer/

+3
source

More articles:


All Articles