My footer won't stay at the bottom if the content gets too long
Question
So I have been looking around on the internet to find a solution in order to make the footer stay at the very bottom on the page regardless of the length of the content of the page. I have followed the CSS from tutorials, the footer is only at the bottom of the page if the content is not long enough, if the content is much longer, the page will get the scroll bar and the footer will get stuck in the middle of the page as you scroll down for more content. Below is my CSS and HTML.
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
Now this is my html, the two absolute positioned divs and the footer are inside the wrapper which has position relative.
<html>
<body>
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
4 answers
solution1
2 2016-04-26 05:26:18
Try to use this above in Css code
<div style="width: 100%;height: auto;border:1px solid red;float:left;">
<div style="width: 100%;height: auto;border:1px solid green;float:left;">
</div>
<div style="width: 100%;height: auto;border:5px solid Yellow;position: fixed;float:left;margin-top: 50%;">
</div>
</div>
solution2
1 2016-04-26 05:05:51
body,html{ background-color:#fff; width:100%; height:100%; margin:0px; padding:0px; } .wrapper { position:relative; top:0px; width:100%; min-height:100%; padding:0px; margin:0px; } .country-container { position:absolute; top:100px; left:20%; width: 1024px; height:1300px; background:blue; } .container { position:absolute; top:0px; left:20%; width: 1024px; height:86px; max-height:300px; background:blue; } #footer{ position:fixed; bottom:0px; width:100%; height:100px; max-height:900px; left:0px; color:#000099; background:#f2f2f2; }
<div class="wrapper"> <div class="container">Container 1</div> <div class="country-container">Container 2</div> <div id="footer">Footer</div> </div>
change #footer to
position:fixed;
solution3
1 2016-04-26 05:19:41
Please try this css and see fiddle link:
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
background: #0000ff none repeat scroll 0 0;
height: 1300px;
left: 20%;
position: relative;
width: 1024px;
}
.container {
background: #0000ff none repeat scroll 0 0;
height: 86px;
left: 20%;
margin-bottom: 3%;
max-height: 300px;
position: relative;
top: 0;
width: 1024px;
}
#footer {
background: #f2f2f2 none repeat scroll 0 0;
bottom: 0;
color: #000099;
height: 100px;
left: 0;
max-height: 900px;
position: absolute;
width: 100%;
}
https://jsfiddle.net/tn30t1k7/2/
Otherwise you can reffer this link:
solution4
1 2016-04-26 07:32:47
<body>
<section class="wrapper">
<main class="content">
content
</main>
<footer class="footer">
footer
</footer>
</section>
</body>
html {
position: relative;
min-height: 100%;
}
body{
margin: 0 0 60px 0;
}
/* don't do that */
/* .wrapper {
position: relative;
} */
.content {
background: green;
height: 200px;
/* height: 700px; */
}
footer{
position: absolute;
bottom: 0;
left:0;
width: 100%;
height: 60px;
background-color: orange;
}
How about this https://jsfiddle.net/zkto8o88/2/ .
.footer class will search for the nearest parent with relative position which in this case is html tag.
If the .wrapper class would have the position relative property then it would not work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.