如何使用剩余高度创建div滚动区域

Question

我有一个div，我想填写页面上的其余空格，并将滚动条放在内容旁边而不是页面的边缘。

我试图使用overflow-y:scroll;width:100%;来启用此功能，但它无效

这有点难以解释，所以这里是一个插件： https://plnkr.co/edit/F2w3JZNxjoMJpxSCzGFM?p=preview 目标是让页面上的滚动条处理滚动而不是页面边缘的滚动

Answer 1

如果您希望您的页面是一个只有.content部分可滚动的全屏应用程序，您可以使用CSS flexbox和视口单元的组合来实现该目标（如果您关注flexbox，请参阅第二个解决方案）支持）。

1. 将内容包装在包装器中，例如<div class="wrapper">
2. 将包装器的高度设置为100vh（视口高度的100％），并使用display: flex并将弹性方向设置为column。
3. 确保flex-shrink上的0设置为.header，因为我们不希望它在高度上崩溃。

这将确保.content在需要时填充，以填充未被.header占用的视口上的剩余垂直空间。请参阅下面的概念验证：

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  position:relative;
  height:112px;
  border-style: solid;
  border-width: 1px;
  flex: 0 0 auto;
}

.content {
  overflow-y:scroll;
  flex: 0 1 auto;
}

<div class="wrapper">
  <div class="header"></div>
  <div class="content">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
</div>

使用CSS flexbox的另一种解决方案就是使用CSS calc，但这会利用对calc()方法的支持：

1. .content身高应该只是calc(100vh - <headerHeight>)，对于您的情况，calc(100vh - 112px)就是{。}}。
2. 请务必在box-sizing: border-box元素上使用.header，以便声明的高度会考虑边框。

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  height: 100vh;
}

.header {
  position:relative;
  height:112px;
  border-style: solid;
  border-width: 1px;
  
  /* Use border-box so that borders are taken into height declaration */
  box-sizing: border-box;
}

.content {
  overflow-y:scroll;
  height: calc(100vh - 112px);
}

<div class="wrapper">
  <div class="header"></div>
  <div class="content">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
</div>