在底部设置页脚，但并不总是在底部[重复]答案

【问题标题】：Set footer on the bottom ,but not allways on bottom [duplicate]在底部设置页脚，但并不总是在底部[重复]
【发布时间】：2016-04-04 10:17:27
【问题描述】：

我必须将页脚设置在底部，但我使用它的方式总是在底部，即使页面内容大于屏幕。

如果内容大于屏幕，我希望滚动才能看到页脚。

  .fijo{
        bottom: 0;
        position: fixed;
        width:100%;
    }

【问题讨论】：

移除固定位置并使用相对位置。
将position: 改为absolute 而不是fixed
重复stackoverflow.com/questions/25671073/…
从jquery中检查Content的高度，然后设置Footer的css。
.fijo{ 底部：0;位置：绝对；宽度：100%； }'

标签： html css twitter-bootstrap

【解决方案1】：

很简单，只要使用下面的CSS代码

 #footer {
 position: absolute;
 bottom: 10;
 left: 0;
 }

页脚的 ID 当然应该是“页脚”，这样才能正常工作，或者将其重命名为您喜欢的任何名称。希望这会有所帮助:)

【讨论】：

bottom: 10 无效 - 只有 0 可以没有度量单位。
@Vucko 很好，这在我的网站上运行良好...
Check the example

【解决方案2】：

您需要使用sticky footer。

HTML

<footer class="footer">
    <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
    </div>
</footer>

CSS

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-color: #f5f5f5;
}

【讨论】：

【解决方案3】：

解决办法

Demo

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ffff00;
    padding:20px;
  text-align:center;
}
#content {
    padding-bottom:50px; /* Height of the footer element */
    text-align:center;
}
#footer {
    background:#00ffff;
    width:100%;
    height:50px;
    position:absolute;
    bottom:0;
    left:0;
  text-align:center;
}

HTML：

<div id="wrapper">      
        <div id="header">Header is here</div>       
        <div id="content">Content is here</div>     
        <div id="footer">Footer is here</div>       
</div>

【讨论】：

【解决方案4】：

如果您将 HTML5 与 Twitter Bootstrap 或任何其他模板结合使用，甚至是从头开始构建的页面，您也可以使用上面提供的代码 @pzp 将其直接应用于页脚元素，无需额外的 ID 或类选择器：

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}

【讨论】：