引导页脚不在底部 [英] Bootstrap footer not at bottom

问题描述

我试图强制我的页脚位于我的网站底部.我不希望它在滚动时停留在屏幕上，而只是在向下滚动时显示在底部.

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>&copy; 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>&copy; COMPAY 2015</p>
        </div>
    </div>

这篇关于引导页脚不在底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！