Question

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

如果内容比屏幕大，我想要滚动以查看页脚。

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

Answer 1

您需要使用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;
}

Answer 2

简单，只需使用以下CSS代码

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

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

Answer 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>

Answer 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;
}

将页脚设置在底部，但不要总是在底部

4 个答案: