本文介绍了引导页脚不在底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图强制我的页脚位于我的网站底部.我不希望它在滚动时停留在屏幕上,而只是在向下滚动时显示在底部.
I am attempting to enforce that my footer goes at the bottom of my website. I do not want it to stick when I scroll, just to appear at the bottom when scrolling down the webpage.
当前-显示网页时,页脚位于内容下方.我添加了诸如 bottom:0;
之类的代码,发现它会粘住并且不适合我的网站.在其他stackoverflow问题上,我还添加了诸如 html,body {height:100%;}
之类的代码-但并不高兴.
Currently - the webpage displays with the footer sitting beneath the content.I have added such code as bottom:0;
and found that it sticks and does not suit my website. I have also added such code as html, body { height:100%;}
as viewed on other stackoverflow questions - but have had no joy.
任何建议将不胜感激.
代码:
.footer {
background: #F37A1D;
position : absolute;
width: 100%;
border-top: 3px solid #F37A1D;
}
<div class="footer">
<div class="container">
<p>© COMPAY 2015</p>
</div>
</div>
推荐答案
*{
padding: 0;
margin: 0;
}
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background: #F37A1D;
border-top: 3px solid #F37A1D;
}
<div class="footer">
<div class="container">
<p>© COMPAY 2015</p>
</div>
</div>
这篇关于引导页脚不在底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!