时间戳

首页 > 解决方案 > 如何在html中设置一个div来填充父元素并在子元素变大时显示滚动条？

html - 如何在html中设置一个div来填充父元素并在子元素变大时显示滚动条？

问题描述

我是 CSS 和 HTML 的新手，并且正在尝试使用 Angular。我想要一个没有“主”滚动条（电子应用程序）的网页。

在此页面中，我将有 3 divs。其中一个（中间的那个）将包含一个身高很大的孩子。这就是为什么这个中间div需要用滚动条溢出。

div换句话说，每当我调整窗口的高度时，我希望该中间成为调整后的高度。它会填满所有可用空间。

我想知道是否可以用 CSS 做到这一点？或者我是否必须编写javascript代码来设置这个中间组件的高度等于父级减去其他元素的高度？

<div>
  <div>
    I would like that the scroll zone expands down to the bottom of the browser
    window. (this text should always be visible)
  </div>
  <div class="scroll-zone">
    scroll-zone
    <div class="big-box">big-box</div>
  </div>
  <div>After scroll zone (should always be visible)</div>
</div>

.scroll-zone {
  height: auto; /*Do I really have to set a fixed size here ?*/
  overflow: auto;
}

.big-box {
  height: 1000px;
  border-style: solid;
  border-color: black;
}

（非工作）示例： https ://stackblitz.com/edit/angular-ivy-1szgga?file=src/app/app.component.html

标签： htmlcssangular

解决方案

<div>
<div>
   I would like that the scroll zone expands down to the bottom of the browser
   window. (this text should always be visible)
</div>
<div style="max-height: 400px;overflow: auto">
   scroll-zone
   <div style="background-color: yellow;height: 500px">big-box</div>
</div>
<div>After scroll zone (should always be visible)</div>
</div>

推荐阅读