如何保持< footer>总是在页面的底部，（不是屏幕）在html5中 [英] How to keep <footer> always at the bottom of page,( not screen) in html5
问题描述
< html>
< head>< / head>
< body>
< div class ='navbar'>< / div>
< div class ='maincontent'>主要内容< / div>
页脚内容
< / footer>
< / body>
< / html>
我尝试将位置设置为相对或绝对位置，但没有一个适合我，我需要总是将页脚定位在页面底部，而不考虑maincontent的内容。任何想法？非常感谢！
据我所知，您希望将footer设置在视口的底部，除非主要内容是足够大，以达到它，在这种情况下，你希望页脚来在页面的底部。
在我看来，这是最好的/最简洁的方式来做到这一点：
请注意，这不是一个JavaScript解决方案，我添加了JS，以便您可以看到增长 .maincontent 块。运行下面的代码片段来了解我的意思。
function addContent（）{$（'。maincontent '）.append（'< p>更多内容< / p>'）;}
html {height：100％;} body {position：relative;保证金：0; min-height：100％;}。maincontent {padding-bottom：1em; / *或页脚高度* /}。footer-box {position：absolute; bottom：0;}
< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>< /脚本>< HTML>< HEAD>< /头><身体GT; < div class ='navbar'> < button onclick =javascript：addContent（）>添加内容< / button> < / DIV> < div class ='maincontent'>主要内容< / div> < footer class ='footer-box'>页脚内容< / footer>< / body>< / html>
I know this is may be a old question, But I have tried many way, if the content of is light such as 2 row, the footer will come up and leave a lot of space. Here is my code:
<html>
<head></head>
<body>
<div class='navbar'></div>
<div class='maincontent'> main content</div>
<footer class='footer-box'>
footer content
</footer>
</body>
</html>
I try to set position to either relative or absolute but none of them works fine for me, I need to always position the footer at the bottom of page, no-matter the content of maincontent. any idea? Thanks a lot!
As far as I can tell, you want to have the footer at the bottom of the viewport, unless the main content is big enough to reach it, in which case you want the footer to come at the bottom of the page.
In my opinion, this is the best/cleanest way to do that:
Note that this is not a JavaScript solution, I have added the JS so you can see the effect of a growing .maincontent block. Run the code snippet below to see what I mean.
function addContent() {
$('.maincontent').append('<p>more content</p>');
}
html {
height: 100%;
}
body {
position: relative;
margin: 0;
min-height: 100%;
}
.maincontent {
padding-bottom: 1em;
/* or the footer height */
}
.footer-box {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>
<head></head>
<body>
<div class='navbar'>
<button onclick="javascript:addContent()">add content</button>
</div>
<div class='maincontent'>main content</div>
<footer class='footer-box'>
footer content
</footer>
</body>
</html>
这篇关于如何保持< footer>总是在页面的底部，（不是屏幕）在html5中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
