My css layout is becoming more than 100% height, example given in jsfiddle

Question

I am messing with my design, and it dont seem to work.

<div id="wrapper">
    <div id="header"></div>
    <div id="fader"></div>
    <div id="body">
        <div id="viewer"></div>

    </div>
</div>
<div id="footer" > a</div>

body,html
{
 height: 100%;
background-color: #2c2c28;   
}
#header
{
 background-color:red;
    height:45px;
}
#footer
{
    height:45px;
    background-color:blue;

}
#wrapper
{
 height:100%; 
margin-bottom:-45px;   

}
#viewer
{
height:100%;
background-color:yellow;   overflow-y: hidden;  
}
#body
{
    background-color:pink;
 height:100%;   
    overflow-y: hidden;
}
#fader
{
 height:20px;   
}

The yellow id=body is extending further down than the page. I would like it to stop at the footer.

Musa · Answer 1 · 2012-10-19T08:04:37.663

I believe you are looking for the sticky footer effect, you have to have an element in the wrapper with the same height as the footer to push down on it to keep it at the bottom. Also you have to set some height properties in the wrapper's css.

<div id="wrapper">
    <div id="header"></div>
    <div id="fader"></div>
    <div id="body">
        <div id="viewer"></div>

    </div>
    <div class="push"></div>
</div>
<div id="footer" > a</div>

.push{
    height:45px;
}
#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom:-45px;      
}

http://jsfiddle.net/eTG4K/41/

EDIT:

Your problem is that you are trying to give #body 100% height and since and since all its ancestors has 100% height, #body will have the height of the window but #wrapper has other children which take up space this will cause it to overflow. You can use margins to solve this problem, though I would consider a redesign.

#wrapper
{
   margin-bottom:-45px;
}
#body
{
   margin-top:-65px;   
}
#viewer
{
    margin-top:65px;   
}
/* add z-index to #fader and #header so they wont be covered by #body and #viewer */
#fader
{
    position:relative;
    z-index:999;
}
#header
{
    position:relative;
    z-index:999;
}

http://jsfiddle.net/eTG4K/68/

You added height : auto. This means that the height is not 100% and the id=body and id=viewer are not 100% height. Notice how the yellow color is not shown in your fiddle — Poul K. Sørensen, Oct 19 '12 at 06:05

score 0 · Answer 2 · answered Oct 19 '12 at 05:44

0

Put your footer inside your wrapper like so:

<body>    
    <div id="wrapper">
        <div id="header"></div>
        <div id="fader"></div>
        <div id="body">
            <div id="viewer"></div>         
        </div>
        <div id="footer" ></div>
    </div> 
</body>
</html>

This prevents the body from extending past the footer, since the wrapper and the body are set to 100% height.

answered Oct 19 '12 at 05:44

davepmiller

2,620
3
33
61

The page still become larger than 100% and the user need to scroll. – Poul K. Sørensen Oct 19 '12 at 05:49

score 0 · Answer 3 · answered Oct 19 '12 at 05:46

0

jsfiddle

<div id="wrapper">
    <div id="header"></div>
    <div id="fader"></div>
    <div id="body">
        <div id="viewer"></div>

    </div>
    <div id="footer" > a</div>
</div>

answered Oct 19 '12 at 05:46

Arun Killu

13,581
5
34
61

Your example also has a scroolbar, the height is not 100% – Poul K. Sørensen Oct 19 '12 at 06:07
i change for testing u can just c the html part ..and you need to adjust the height – Arun Killu Oct 19 '12 at 06:07

score 0 · Answer 4 · answered Oct 19 '12 at 05:53

0

............Live Demo......................

Hi now you can used to fixed position as like this

#footer {
    background-color: blue;
    bottom: 0;
    height: 45px;
    left: 0;
    position: fixed;
    right: 0;
}

Live demo

answered Oct 19 '12 at 05:53

Rohit Azad Malik

31,410
17
69
97

Notice how you still need to scroll to see the footer. – Poul K. Sørensen Oct 19 '12 at 06:06

My css layout is becoming more than 100% height, example given in jsfiddle

4 Answers4