html - 根据需要自动调整 Div Plus 滚动条的大小

Question

这段代码的功能接近于我所追求的:

<div id="outer" style="position:relative; background-color:lightgoldenrodyellow; margin:0px; top:0px; left:0px; width:300px; height:200px;">
    <span id="heading" style="background-color:palevioletred; display:block; text-align:center">
        List of Data
    </span>
    <div id="container" style="position:relative; overflow: auto;  background-color:aquamarine; height:160px;">
            <ul id="data">
                <li>Data Item 1</li>
                <li>Data Item 2. This data item requires more than 300 px of width and wraps as expected.</li>
                <li>Data Item 3</li>
                <li>Data Item 4</li>
                <li>Data Item 5</li>
                <li>Data Item 6</li>
                <li>Data Item 7</li>
                <li>Data Item 8</li>
                <li>Data Item 9</li>
                <li>Data Item 10. A vertical scrollbar has been added to the list div</li>
            </ul>
    </div>
</div>

我遇到困难的地方是“容器”div 的高度。它似乎很好地继承了“外部”div 的宽度，但它的高度不受“外部”div 的限制。如果我从“容器”div 中删除高度，它会用尽数据所需的高度，导致它填充的空间小于数据较少时的可用空间，并溢出超出“外部”指定的高度"当有更多数据时 div。我想要的是让“容器”div 根据“外部”div 样式设置完全消耗“外部”div 中可用空间的平衡(在考虑“标题”跨度所需的高度之后)，添加需要时“容器”div 的垂直滚动条？请注意，我正在寻找严格的 html/css 解决方案。代码如下所示:

如果我从“container div”中删除高度样式，这就是它的样子:

我希望外观不变。我希望“容器”div 的高度由“外部”div 高度设置控制。

Answer 1

我建议为 #outer 父 div 使用 flexbox。使用此设置，您可以从 #outer 的 height 值控制 #container 的 height。

#outer {
  display: flex;
  flex-direction: column;
}

#outer {
  position: relative; 
  background-color: lightgoldenrodyellow; 
  margin: 0px; 
  top: 0px; 
  left: 0px; 
  width: 300px; 
  /* changes made */
  height: 195px;
  display: flex;
  flex-direction: column;
}

#heading {
  background-color:palevioletred; 
  display:block; 
  text-align:center;
}

#container {
  position: relative; 
  overflow: auto;  
  background-color:aquamarine; 
  /* height:160px; */
}

<div id="outer">
    <span id="heading">
        List of Data
    </span>
    <div id="container">
            <ul id="data">
                <li>Data Item 1</li>
                <li>Data Item 2. This data item requires more than 300 px of width and wraps as expected.</li>
                <li>Data Item 3</li>
                <li>Data Item 4</li>
                <li>Data Item 5</li>
                <li>Data Item 6</li>
                <li>Data Item 7</li>
                <li>Data Item 8</li>
                <li>Data Item 9</li>
                <li>Data Item 10. A vertical scrollbar has been added to the list div</li>
            </ul>
    </div>
</div>