javascript - 如何使溢出 y 滚动响应的 div(高度明智)？

Question

想要的结果是

1. 第二个 div 内的 div 应该总是有 overflow-y 滚动。

2. 底部的按钮应该始终贴在窗口底部

3. 这个结构应该是响应式的，即使在调整大小时也应该保持这样。

我愿意使用 bootstrap 或解决此问题的东西

 .border {
      border: 1px solid
    }

<div class="border" style="height: 79px;">

</div>

<div class="border" style="height: 716px; overflow-y: scroll; margin-top: 20px">

  <div class="border" style="height: 79px;">
  </div>

  <div class="border" style="height: 79px;">
  </div>

  <div class="border" style="height: 79px;">
  </div>

  <div class="border" style="height: 79px;">
  </div>

  <div class="border" style="height: 79px;">
  </div>
  <div class="border" style="height: 79px;">
  </div>
  <div class="border" style="height: 79px;">
  </div>
  <div class="border" style="height: 79px;">
  </div>
  <div class="border" style="height: 79px;">
  </div>
  <div class="border" style="height: 79px;">
  </div>
  <div class="border" style="height: 79px;">
  </div>
  <div class="border" style="height: 79px;">
  </div>
  <div class="border" style="height: 79px;">
  </div>
  <div class="border" style="height: 79px;">
  </div>
  <div class="border" style="height: 79px;">
  </div>
  <div class="border" style="height: 79px;">
  </div>


</div>

<button style="width: 100%">This button should stick to bottom</button>

Answer 1

您可能需要使用额外的 div 获得窗口内的所有空间，因为容器广告将其粘贴到边缘(顶部/左侧/右侧/高度 = 0 像素)!

您甚至可能需要制作容器 overfolow:none 以供将来使用!

使用 CSS 函数“calc”计算的可滚动 div 的高度如下:

.container {
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  margin: 10px;
}

.scrollable {
  overflow-y: scroll;
  margin-top: 20px;
  height: calc(100% - 124px);
  /*124px => 10px on container margin + 79px top div + 15px button + 20 px this top margin*/
}

.border {
  border: 1px solid
}

  <div class="container">
    <div class="border" style="height: 79px;"></div>

    <div class="border scrollable">
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
      <div class="border" style="height: 79px;"></div>
    </div>

    <button style="width: 100%;">This button should stick to bottom</button>
  </div>