为什么css不允许元素改变大小来填充屏幕？

Question

我之前就堆栈溢出问了以下问题： create a scroll bar in a sidebar

这里基本上我正在尝试创建一个侧边栏。在那个侧边栏中，我想要一个未知大小的标题和一个未知大小的页脚。在侧边栏的页脚和标题之间，我想要一个包含一长串内容的滚动div。在上面的问题中，我问如何使用css使滚动div填充页眉和页脚之间的空间。

我得到了很多答案，例如： “选择器如何知道另一个元素的高度？它不是CSS的用途。”

现在我的问题是，为什么你不能这样做是css？为什么css不允许你设置两个div来占用他们需要的空间，并且中间的div填充剩余的空间？这不是一个需要解决的常见问题吗？

Answer 1

你可以在CSS中执行它，它不像你希望的那样支持。使用CSS calc功能，您可以按照描述的方式分配动态值。

您要从#sidebar中移除overflow: hidden，并在#main中指定一个带有calc函数的高度，类似于：

height: calc(100% - 30px);

最大的缺点是所有浏览器都不支持calc，最重要的是，Chrome目前的稳定版本。但是，它可以在Chromekit 19中使用（因此很快就可以使用）。同样，它在Firefox上的moz前缀下。 IE9也支持它。

示例：http://jsfiddle.net/XGyHP/

Answer 2

是的，这是一个常见问题，据我所知，这是针对未来CSS版本的规范。至于为什么会这样，我不能说。

奇怪的是，表格知道如何执行此操作（http://jsfiddle.net/45YJE/），因此可能没有技术上的原因，为什么这不适用于div。你只需要学会忍受它。

Answer 3

this对你来说怎么样？我很确定它也适用于所有浏览器。