我为用户应用程序提供了流畅的CSS布局。目的是扩大大的内容区域（白色）和深蓝色的#notiarea以填充客户端桌面。目标是使#notiarea扩展为填充用户桌面的其余部分。
#notiarea和content div会具有一个内容滚动条，如下图所示。
我的问题是如何使darkblue（#notiarea）元素仅扩展到应用程序视图区域的其余高度？如何获得#notiarea在所有固定高度元素下的高度都可变，而不是我需要使用css标签“ overflow：auto;”的能力？我希望使用CSS解决方案，但我会接受jQuery解决方案。
源代码：这是用于快速实验的jsfidle：http://jsfiddle.net/YLZRb/
最佳答案
演示：http://dabblet.com/gist/3768929
我使用非常有用的'box-sizing：border-box'属性来获得此结果，请在此处阅读：paulirish.com/2012/box-sizing-border-box-ftw/
它与IE8 +兼容，您只需要为IE7及以下版本调整布局即可。您可以将补充工具栏的位置设为“绝对：绝对” ...这是最好的选择（不必太麻烦）。
好的，我之前曾将类似的布局制作成数以百万计的内容，并且再也不能不感谢box-sizing属性。这是对更改的快速回顾：
#sidebar现在的“ padding-top”值等于#newpostcreator的高度。然后，再次使用负的顶部位置将#newpostcreator放回原位，其值等于其高度，在本例中为-206px。
请注意，我还通过使用“ *”通用选择器为每个元素指定了“ position：relative”。当页面上有几个绝对定位的元素时，这非常有用，因此您不必为每个容器指定相对位置。这主要是DRY（请勿重复自己）操作，可以使代码更简洁。这也通过“顶部”，“左侧”，“右侧”和“底部”为每个元素提供了附加的位置控制。
另外，由于#sidebar为'position：fixed'，因此将其从布局中移除并相对于视口定位。因此，我们需要一些空白空间以使其不中断/重叠页面内容。我通过给#container一个等于边栏宽度的padding-left值来做到这一点。但是我看到你已经在小提琴中做到了。我只是稍微提炼一下。
现在回到边栏，我提到给它一个206像素的padding-top。要了解其背后的逻辑，您应该了解方块大小在布局中的作用。基本上，带有“边框”的元素的填充和边框都位于容器内部。因此，无论您指定元素的宽度如何，添加padding / border都不会添加其最终的宽度/高度，它将包含在其中。请记住，这不适用于页边距。
因此，边栏左侧的空白减去206px的填充是100％，我们现在将其分配给#notiarea。
差不多了。如果您学习这些代码，将会比我所能提供的更好地理解。请务必检查链接，并记住为旧版本的Firefox，Opera和Chrome的框大小添加供应商前缀。
关于css - 固定高度元素下侧边栏中的动态高度元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12548537/