Question

我正在尝试将<div>延伸到页面底部。我希望此<div>像页面左侧的条形一样。当我打开页面时，它确实沿左侧拉伸，但是当我向下滚动时，它将不再拉伸。问题是我有多个<div>彼此包裹，但我所谈论的只是<html>和<body>元素的子元素。我尝试了很多方法来使其正常运行，但是height:auto;，height:100%;或height:inherit;似乎不起作用，但是如果我使用height:000px;，它会起作用。我还应该提到<html>和<body>都有height:100%;和width:100%;。

代码如下：

  .leftbar {
    background-color: rgba(0,0,0,0.85);
    width: 10%;
    height: 100%;
    float: left;
    position: relative;
    left: 0;
    margin-top:0;
    bottom:0;
    right:0;
    overflow: hidden;
}

更让我困惑的是，我在页面底部也有一个页脚，但效果很好。它可以拉伸到我需要的程度。它的代码如下：

.footer {
    background-color: rgba(0,0,0,0.85);
    width: 100%;
    height: 50px;
    position: relative;
    bottom: 0;
}

您能告诉我为什么左侧横条不会伸展吗？

Answer 1

满足您需求的关键点是使用：height: 100vh

但是，您必须知道，如果sidebar的内容比sidebar容器长，那么当您向下滚动sidebar时，100vh背景将丢失。

因此，最好使用min-height: 100vh。

希望这会有所帮助。

* {
  box-sizing: border-box;
}
.container::after {
  display: table;
  content: "";
  clear: both;
}

.sidebar {
  float: left;
  width: 200px;
  min-height: 100vh;
  background: #f0f0f0;
  border: 1px solid #ededed;
}

.main-container {
  padding: 20px;
  height: 1200px;
  float: left;
  width: calc(100% - 200px);
  background: #ddd;
}

.footer {
  background: yellow;
  padding: 20px;
}

<div class="container">
  <div class="sidebar">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </div>
  <div class="main-container">
    This main container is very long.
  </div>
</div>
<div class="footer">
  Yay! you found footer.
</div>

Div不会延伸到页面底部

1 个答案: