如何在标题下设置一个填充剩余空间的div？

Question

prnt.sc/ha3dag

黑色div是标题，高40像素。它下面的蓝色div需要填满剩余的空间，而不会越过屏幕高度并导致溢出。

Answer 1

你没有给我们很多东西。当您将来发布问题时，请务必添加一些代码，以便我们更好地了解问题。话虽如此，我想我可以提供帮助。

你有这样的事情：

<div style="height:40px">
<h1>SomeContentHere</h1>
</div>
<div>
<h1>OtherContent</h1>
</div>

但我不是设置硬编码值，而是喜欢做百分比。

<div style="height:10%">
<h1>SomeContentHere</h1>
</div>
<div style="height:90%">
<h1>OtherContent</h1>
</div>

这应该根据可用的屏幕大小而改变，因为它是百分比而不是静态值。

如果您的标题有静态值，则可以执行以下操作：

  <div style="height:40px">
    <h1>SomeContentHere</h1>
    </div>
    <div style="height: calc(100% - 40px)">
    <h1>OtherContent</h1>
    </div>