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

Question

什么是创建流体布局的最佳方式,它将在水平和垂直方向填充屏幕？(布局应该是窗口的100%高度,因此不应该看到滚动条,也不需要滚动)

我正在考虑纯粹的技术,因为布局的元素将会发生变化.

示例可能是这样的:

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

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

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

但是,如果我们添加/删除元素,例如在标题顶部添加栏,或者采取另一个侧边栏,该怎么办？整个布局仍应填充屏幕,不需要任何代码或样式更改.我有点难以理解如何处理这整件事.

便士你的想法互联网？

Answer 1

如果您的目标不是 Internet Explorer，您可以position:absolute、box-sizing:border-box、、 、 、top、、、、 、 和来创建漂亮的全屏布局，并且您可以很好地控制元素与其容器相关的放置位置。rightbottomleftwidthheight

通过border-box调整尺寸，您不必担心这一点，border并且padding会扩大盒子。

请参阅此示例： http: //jsfiddle.net/thai/jtYDP/2/

它适用于 Firefox 和 Chrome。