Question

我试图让我的内容扩展到容器div，但它被切断了。

这是我的HTML代码：

<div id="container">
<section>
Lots of content goes here
</section>
</div>
<div class="footer">Footer Content</div>

我的CSS代码：

html {
  min-height: 100%;
  position: relative;
}

body {
  width: 100%;
  height: 100%;
  background: #ECECEC;
  overflow: auto; 
}

#container {
  width: 80%;
  margin: 0 auto;
  background: white;
  height: 100vh;
}

section {
  overflow: auto; /* Trying to make content scrollable */ 
}

.footer {
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 0;

}

页脚似乎与底部内容的一部分重叠。我一直在寻找答案，似乎页脚的位置可能导致这个问题。有没有办法让内容扩展到容器div并继续在我的情况下底部的页脚？

Answer 1

CSS有两个问题：

您应min-height: 100vh;使用#container。这说高度至少应该是100vh＆＃39;如果需要，应该长得更高。
您应position: fixed;使用.footer。无论页面的垂直滚动如何，这都将确保页脚保留在该位置。

获取内容以与页面的其余部分一起滚动

1 个答案: