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

Question

我的网站包含三个组件：

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

我了解如何实现液体布局的水平方面，以便导航保持固定，而内容区域占用剩余宽度，但我不明白如何实现液体布局的垂直方面，以便导航和内容区域至少占据剩余的高度，最多占据其内容的高度（假设这比屏幕高减去标题高度）。

可以用div吗？

Answer 1

是的，这是可能的。看看Ryan Fait 的粘性页脚，以及我之前对类似问题的回答。

Answer 2

给你：http: //jsfiddle.net/HcBKV/embedded/result/

通常有两种方法可以解决它。一种是设置高度和宽度为100%，另一种是通过绝对位置进行拉伸，使其从每一侧固定长度。