Question

我有以下示例，其中页脚位于底部，并且它与垂直滚动条重叠。

我有一些页面，其中垂直滚动条不在那里（内部内容会更少）。没有垂直滚动条的页面没有问题，但带有垂直滚动条的页面会有重叠的页脚。因此，无论垂直滚动条如何，如何使页脚显示正常工作。

或查看以下演示：

body {
  height: 100%;
  width: 100%;
  margin: 0px;
  overflow: hidden;
}
header {
  background: red;
  text-align: center;
  left: 0;
  right: 0;
  top: 0;
  height: 100px;
  border: 10px solid black;
  color: white;
}
#content {
  position: absolute;
  margin: 0px;
  left: 363px;
  right: 0px;
  top: 120px;
  bottom: 1px;
  width: 1557px;
  z-index: 0;
  padding: 10px;
  border: 1px solid rgb(187, 187, 187);
  overflow: auto;
  display: block;
  visibility: visible;
  background: rgb(255, 255, 255);
}
#content-inner {
  height: 844px;
  overflow: auto;
  width: 100%;
  right: 0;
  left: 0;
  position: absolute;
}
footer {
  background: blue;
  color: white;
  height: 80px;
  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border: 5px solid green;
  z-index: 999999;
}

<!DOCTYPE html>
<html>

<head>
  <title>CSS - Width</title>


</head>

<body>
  <header>
    Header
  </header>
  <div id="content">
    <div id="content-inner">
      scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>content outside
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>End
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>Actual End

    </div>
    <footer>
      Footer
    </footer>
</body>

</html>

Answer 1

我非常喜欢这个解决方案：

/* Sticky footer styles
-------------------------------------------------- */
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;
  color: #fff;
  background-color: #000;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
   margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

在代码笔中查看： http://codepen.io/anon/pen/xVbbaw

编辑：在下面的评论中提出的新的codepen更新。它现在将删除body和content div上的边距，以便内容的高度填充页脚所在的空白区域：http://codepen.io/anon/pen/qZEYyO

Answer 2

将保证金底部或填充底部给＃content-inner .....

#content-inner{margin-bottom: 110px}

margin-bottom =（页脚高度+一些额外像素）....

如何避免页眉和页脚之间出现与垂直滚动条重叠的固定页脚

2 个答案: