Question

我制作了一个页脚部分，它位于我的网页底部。当我的网页内容小于浏览器视口的高度时，我遇到了问题，这在页脚和页面末尾之间留下了空白。我尝试使用这块css来解决它。

.footer {
  position: absolute;
  bottom: 0;
  height: 125px;
}

它在我的网页上完美地工作，但内容很少，但对于大型网页，页脚与内容重叠。我遵循了几个在线教程，但我仍然无法做到正确。

<body class="bg-1">
<div class="container-full">
    <div class="container">
        ...
    </div>
</div>

<div class="footer text-center">
   ...
</div>
</body>

.container-full {
  width: 100%;
  height: 100%;
  padding-top: 70px;
  margin: 0 auto 125px;
}
.bg-1 {
  background: url(../img/1.png) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
}
.footer {
  position: absolute;
  bottom: 0;
  height: 125px;
}

我正在使用Twitter Bootstrap。

Answer 1

您可以尝试以下方法：

＆＃13;

html,
body {
  height: 100%;
}
.container-full {
  table-layout: fixed;
  background: #ccc;
  display: table;
  height: 100%;
  width: 100%;
}

.footer {
  display: table-footer-group;
  background: #2f2f2f;
  overflow: hidden;
  color: #fff;
  width: 100%;
  height: 1%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="bg-1">
  <div class="container-full">
    <div class="container">
      <p>Main Content goes here</p>
    </div>
    <div class="footer text-center">
      <p>Footer text goes here..</p>
    </div>
  </div>
</body>

＆＃13;

将div放在页面或屏幕的底部

1 个答案: