Power By 专否社区

100% height -dynamic height footer at the bottom

Go To StackoverFlow.com

2

I have the following webpage.

<body>
<div id="everything">
<div id="top_header">TOP BAR WITH INFO. FIXED HEIGHT</div>
<div id="content">
<div id="header"><h1> MENU</h1></div>
<div id="body">CONTENT</div>
</div><!--end content-->
<div id="footer">DYNAMIC HEIGHT DEPENDING ON THE LINKS IN THE FOOTER</div>
</div><!--end everything-->
</body>

and the styles: 

    <style type="text/css">
body {
    background-color: #FFFFFF;
    font: 13px arial;
    margin: 0;
    padding: 0;
    width: 100%;
}
#everything {
    background-color: #FFFFFF;
    min-height: 100%;
    margin: auto;
    width: 100%;
}
#content {
    display: block;
    margin: auto;
    width: 1000px;

}
#header {
    padding-bottom: 25px;
    background-color:#666699;
    height:60px;
}
#body {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto;
    padding-bottom: 23px;
    background-color:#CC3333;
    height:1500px;
}
#footer {
    display: inline-block;
    position: absolute;
    bottom:0px;
    width: 100%;
    background-color:#FF6600;
    height:70px;
}
#top_header {
    width:100%;
    background-color:#0066CC;
    height:30px;
}
h1{
    margin:0;
}
</style>

The height of my footer is dynamic and i can't change the HTML structure, only the CSS. When i see the webpage on a smaller screen and the height of "body" is greater than the viewport there's no issue but if i view the webpage on a larger screen and the size of "body" is smaller than the viewport, the footer doesn't stick to the bottom. Also, if the size of the "body" is large(like in this example) it doesn't push the footer at the bottom. Can you help me in having the footer always sticking at the bottom of the viewport without knowing the height of the footer and also the height of "body" where all my content is?

Thanks, Mihai

2012-04-04 08:17
by Mihai Ilaș
Do you need the footer visible just after the body? or, just at the bottom of the viewport (so that if the body is of very small height, footer still stick to bottom) - mshsayem 2012-04-04 08:24
footer still stick to the bottom if body is very small heigh - Mihai Ilaș 2012-04-04 08:54

0

you can define footer position relative and remove absolute

#footer{
   position:relative;
}
2012-04-04 08:25
by Rohit Azad
yes, this works in this specific case. next step would be not to have that 1500px height on body and even if i don't have too much content in "body" the footer sticks to the bottom and everything is 100% height of the viewport - Mihai Ilaș 2012-04-04 09:01

0

This is not entirely possible in CSS2, specifically the flexible height footer being correctly pushed down by expanding content. You can get it to stick at the bottom of the screen with variable height, but since you don't know that specific height prior, you can't set the content margin/padding-bottom accordingly.

I suggest you measure the footer height by JavaScript after page load and apply that as content padding/margin-bottom, which gets you around the only real issue that you are facing.

Another option would be to exploit tables by using wrappers and display: table-row/table-cell. I have answered a similar question here: https://stackoverflow.com/a/9946474/759144

2012-04-04 08:35
by mystrdat

0

Pl z check bellow demo.I think this solution may help you to solve your problem.

body {
    background-color: #FFFFFF;
    font: 13px arial;
    margin: 0;
    padding: 0;
    width: 100%;
}
#everything {
    background-color: #FFFFFF;
    min-height: 100%;
    margin: auto;
    width: 100%;
}
#content {
    display: block;
    margin: auto;
    width: 1000px;

}
#header {
    padding-bottom: 25px;
    background-color:#666699;
    height:60px;
}
#body {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto;
    padding-bottom: 23px;
    background-color:#CC3333;
    height:1500px;
}
#footer {
    display: inline-block;
    position: sticky;
    bottom:0px;
    width: 100%;
    background-color:#FF6600;
    /* height:70px; */
    bottom: 0;
}
#top_header {
    width:100%;
    background-color:#0066CC;
    height:30px;
}
h1{
    margin:0;
}
<html>


<body>
<div id="everything">
<div id="top_header">TOP BAR WITH INFO. FIXED HEIGHT</div>
<div id="content">
<div id="header"><h1> MENU</h1></div>
<div id="body">CONTENT</div>
</div><!--end content-->
<div id="footer">DYNAMIC HEIGHT DEPENDING ON THE LINKS IN THE FOOTER</div>
</div><!--end everything-->
</body>



</html>

2019-02-12 06:00
by Falguni Prajapati
Ads