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
you can define footer position relative and remove absolute
#footer{
position:relative;
}
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
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>