CSS页脚粘在页面底部答案

【问题标题】：CSS Footer glued to the bottom of the pageCSS页脚粘在页面底部
【发布时间】：2016-05-01 21:16:43
【问题描述】：

我尝试创建 div 页脚，但有问题。

我在容器内一一放置了几个 div 块。容器有 100% 的高度。 Container First Div 内部有 100px 的高度（标题）。 Second Div (Mainbody) 的所有高度都必须达到站点底部（屏幕尺寸的 bootom 部分）或更高。

第三格有绝对位置，位于底部。但 Container Div 的摘要高度超过 100%，因为我在页面右侧看到滚动。如何解决？

具有 css: height:100% 的页面占用超过 100%

html, body {
  height: 100%;
  margin:0;
  padding:0;
  background-color: yellow;
}

.container {
  position:relative;
  min-height:100%;
  background-color: green;
}

.header {
  background-color: blue;
  height: 100px;
}

.mainbody {
  background-color: gray;
  height: 100px;
}

.footer {
   position:absolute;
   bottom:0;
   width: 100%;
   background-color: red;
}

<body>
  <div class="container">
    <div class="header">
      <p>
      header
      </p>
    </div>
    <div class="mainbody">
      <p>
      mainbody
      </p>
    </div>
    <div class="footer">
      <p>
      footer
      </p>
    </div>
  </div>
</body>

【问题讨论】：

你试过position:fixed作为页脚吗？
这听起来像你想把页脚粘在页面底部？如果是这样，Google sticky footer 有几种方法可以做到这一点

标签： html css

【解决方案1】：

您的 html 边距的肮脏解决方案。我已在您的 html、body css 中添加了 margin-top 属性。现在右边没有滚动条了。

似乎margin: 0; 对margin-top 属性没有影响。我在网上读到一些浏览器倾向于在某些元素上默认设置边距，比如body。我给了你一个非常肮脏的解决方案，它可能不适用于响应式设计。

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    margin-top: -8px;
    background-color: yellow;
}

【讨论】：

【解决方案2】：

您可以尝试position:fixed; bottom:0; left:0; right:0; height:somevalue; 用于footer 元素，并为body 元素添加padding-bottom:somevalue（somevalue 与body 的padding-bottom 和footer 的高度相同）

【讨论】：

【解决方案3】：

使用浏览器打开。它不显示任何滚动条，如此 sn-p 所示。设置

.container{ height:100%}

而不是

min-height:100%

因为它会超过页面的完整大小。

【讨论】：