如何用div实现垂直液体布局

Question

我的网站有三个组成部分：

• 跨越屏幕宽度的固定高度标题
• 左侧标题下方的固定宽度导航，跨越屏幕的剩余高度
• 导航右侧的内容区域，占用任何剩余空间。

我理解如何实现液体布局的水平方面，以便导航保持固定而内容区域占用剩余宽度，但我不明白如何实现液体布局的垂直方面，以便导航和内容区域占用至少高度的剩余部分，最多其内容的高度（假设它高于屏幕而不是标题高度）。< / p>

div可能吗？

Answer 1

是的，这是可能的。请查看Ryan Fait's sticky footer和我之前的answer to a similar question。

Answer 2

在这里：http://jsfiddle.net/HcBKV/embedded/result/

通常有两种方法可以解决这个问题。一种是将高度和宽度设置为100％，另一种是通过绝对位置拉伸并使其从每一侧固定长度。