html - 仅使用 CSS 在动态大小的元素上设置宽度或高度的方法

Question

除了使用 flexbox 之外，还有哪些方法可以在同级动态更改其大小的容器中设置高度？仅使用 CSS。

我问的原因是我必须支持一些非常老的浏览器。

例子:

<div class="widget">
    <div class="nav">...</div>
    <div class="content">...</div>
</div>

我不知道小部件的大小，因为客户可以根据需要更改尺寸。 nav 元素也是可定制的。要注意的是，我想在内容超出剩余空间时提供滚动。

Answer 1

希望您可以修改您的 HTML 结构以添加两个容器 <div>元素。这样做将允许您利用 display: table , display: table-row和 display: table-cell CSS 属性。

通过在 .nav 上设置较小的高度值单元格，它将自动扩展到其内容所需的任何大小。并且不在 .content 上设置高度单元格，它将填充剩余空间。

最后，使用内部 <div>与 max-height: 100%和 overflow-y: scroll ，当内容对于可用空间来说太大时，您可以强制滚动内容。

.widget {
  background-color: lightgrey;
  display: table;
  height: 300px;
  width: 100%;
}

.nav-container,
.content-container {
  display: table-row;
}

.nav {
  background-color: blue;
  display: table-cell;
  height: 1px;  // Set a very small height value, and it'll expand automatically
}

.content {
  background-color: red;
  display: table-cell;
}

.scroll {
  max-height: 100%;
  overflow-y: scroll;
}

<div class="widget">
  <div class="nav-container">
    <div class="nav">
      One<br>Two<br>Three
     </div>
  </div>
  <div class="content-container">
    <div class="content">
      <div class="scroll">
      <p>Lorem ipsum dolor sit amet, pro id volumus efficiendi delicatissimi, cu nullam accommodare mei. At lobortis abhorreant ius. Qui soleat albucius tractatos eu, sed dolorum nonumes scribentur ne, ex mazim feugiat theophrastus has. No vix omnis congue. Et mea volumus postulant, ne qui veritus complectitur.</p>
      
      <p>Lorem ipsum dolor sit amet, pro id volumus efficiendi delicatissimi, cu nullam accommodare mei. At lobortis abhorreant ius. Qui soleat albucius tractatos eu, sed dolorum nonumes scribentur ne, ex mazim feugiat theophrastus has. No vix omnis congue. Et mea volumus postulant, ne qui veritus complectitur.</p>
      
      <p>Lorem ipsum dolor sit amet, pro id volumus efficiendi delicatissimi, cu nullam accommodare mei. At lobortis abhorreant ius. Qui soleat albucius tractatos eu, sed dolorum nonumes scribentur ne, ex mazim feugiat theophrastus has. No vix omnis congue. Et mea volumus postulant, ne qui veritus complectitur.</p>
      
      <p>Lorem ipsum dolor sit amet, pro id volumus efficiendi delicatissimi, cu nullam accommodare mei. At lobortis abhorreant ius. Qui soleat albucius tractatos eu, sed dolorum nonumes scribentur ne, ex mazim feugiat theophrastus has. No vix omnis congue. Et mea volumus postulant, ne qui veritus complectitur.</p>
      
      <p>Lorem ipsum dolor sit amet, pro id volumus efficiendi delicatissimi, cu nullam accommodare mei. At lobortis abhorreant ius. Qui soleat albucius tractatos eu, sed dolorum nonumes scribentur ne, ex mazim feugiat theophrastus has. No vix omnis congue. Et mea volumus postulant, ne qui veritus complectitur.</p>
      
      <p>Lorem ipsum dolor sit amet, pro id volumus efficiendi delicatissimi, cu nullam accommodare mei. At lobortis abhorreant ius. Qui soleat albucius tractatos eu, sed dolorum nonumes scribentur ne, ex mazim feugiat theophrastus has. No vix omnis congue. Et mea volumus postulant, ne qui veritus complectitur.</p>
      </div>
    </div>
  </div>
</div>