在另一个内部自动调整div

Question

我在容器div中有一个标题和一个内容div。我希望标题的高度是固定的，内容div占用容器div的其余部分。简单的解决方案是将内容div的高度设置为（容器标题）像素。有没有其他方法可以做到这一点？

div.container { height: 300px; width: 100%;}
div.container h2 { height: 15px }
div.container div.content { height: ?? }

Answer 1

我不相信你能用简单的CSS做到这一点。但是，在使用像LESS或Sass这样的CSS预处理器时，实现它是微不足道的。 less和sass都支持变量，所以你可以这样做：

@total-height: 300px;
@h2-height: 15px;

div.container { height: @total-height; width: 100%;}
div.container h2 { height: @h2-height}
div.container div.content { height: @total-height - @h2 }

注意：我没有编译/测试此代码。但是你明白了。

Answer 2

首先，您不需要将div.container的宽度设置为100％。你可以免费获得。

其次，如果你有一个固定的容器高度，从容器中减去标题（15px）的算法很简单（300px）。简单就是好。

如果容器的高度未固定，您可以尝试使用绝对或相对定位来将内容div的底部钉在父级的底部（例如bottom: 0px）。但你显然不需要这个。