没有内容时如何在底部设置页脚 [英] how to set footer at the bottom when there is no content
本文介绍了没有内容时如何在底部设置页脚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<footer>
<div class="container">
<div class="row container">
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<p>Designed by <a href="http://wiredelta.com/" target="_blank">Wiredelta</a> </p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<div class="pull-right barMain">
<ul class="social-bar">
<li>
<a href="https://www.facebook.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://twitter.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://plus.google.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
当body中没有内容时，页脚不会在页面底部.因此，我只需要将页脚固定在底部，当我运行代码时，plzz会提出如何在页脚处固定页脚的建议恰好在底部.
解决方案
您有3个建议使用flex-box的选项.
1.位置:固定
footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
}
2.弹性盒
HTML
<html>
<body>
<main></main>
<footer></footer>
</body>
</html>
CSS
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1;
}
演示: https://codepen.io/marcobiedermann/pen/XpoarE
3.表格
HTML
<html>
<body>
<main></main>
<footer></footer>
</body>
</html>
CSS
html {
height: 100%;
}
body {
display: table;
min-height: 100vh;
}
main: {
height: 100%;
}
footer {
display: table-row;
height: 1px;
}
演示: https://codepen.io/marcobiedermann/pen/jImsc
<footer>
<div class="container">
<div class="row container">
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<p>Designed by <a href="http://wiredelta.com/" target="_blank">Wiredelta</a> </p>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 no-padding">
<div class="pull-right barMain">
<ul class="social-bar">
<li>
<a href="https://www.facebook.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-facebook fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://twitter.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa fa-twitter fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://plus.google.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-google-plus fa-stack-1x"></i></span>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank">
<span class="fa-stack back-fa "><i class="fa fa-instagram fa-stack-1x"></i></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
not getting footer at bottom of the page when there is no content is present in the body.so i need to fix footer at the bottom only, when i run the code the code.plzz give suggestion how to fix footer at the bottom exactly.
解决方案
You have three options from which I would suggest using flex-box.
1. position: fixed
footer {
position: fixed;
left: 0;
bottom: 0;
right: 0;
}
2. Flex-box
HTML
<html>
<body>
<main></main>
<footer></footer>
</body>
</html>
CSS
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1;
}
Demo: https://codepen.io/marcobiedermann/pen/XpoarE
3. Table
HTML
<html>
<body>
<main></main>
<footer></footer>
</body>
</html>
CSS
html {
height: 100%;
}
body {
display: table;
min-height: 100vh;
}
main: {
height: 100%;
}
footer {
display: table-row;
height: 1px;
}
Demo: https://codepen.io/marcobiedermann/pen/jImsc
这篇关于没有内容时如何在底部设置页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
