javascript - 使用 HTML & CSS & JS 创建流畅的全屏布局的最佳技术？

Question

创建流畅布局的最佳方式是什么，它可以在水平和垂直上填满屏幕？ (布局应为窗口高度的 100%，因此不应显示滚动条，也不需要滚动)

我的想法纯粹是技术发展，因为布局的元素会发生变化。

例子可能是这样的:

---------------------------------------
| HEADER  100% x 100px                |
---------------------------------------
|         |                 |         |
| SIDEBAR |      FILL       | SIDEBAR |
| 200px   |                 | 30%     |
| x 100%  |                 | x 100%  |
|         |                 |         |
|         |                 |         |
---------------------------------------

1. 标题，横跨整个屏幕，
2. 侧边栏， float 到边缘，并跨越剩余的可用高度
3. 填充元素，水平和垂直填充其余元素

目前看来这只能通过对窗口调整大小(就高度和填充而言)进行 JavaScript 操作来实现。

但是如果我们添加/删除元素，比如在标题顶部添加栏，或者去掉另一个侧边栏怎么办？整个布局仍应填满屏幕，无需任何代码或样式更改。我对如何处理这整件事感到有些困惑。

一分钱给你的互联网想法？

Answer 1

您不必拥有 JavaScript - 您可以使用 HTML + CSS...

这里有很多三列解决方案:

http://css-discuss.incutio.com/wiki/Three_Column_Layouts

编辑:高度问题

如果您只想要整个高度的流体，这是我在 JSFiddle 上模拟的解决方案...

http://jsfiddle.net/Sohnee/qJjyc/

更新:

这是一个带有标题的示例，以演示您如何考虑它...

http://jsfiddle.net/qJjyc/1/