css - 如何为填充浏览器窗口的多个 div 编写 CSS？

Question

我想要的是一个接一个地拥有多个 div，每个都是浏览器/视口(viewport)的完整宽度和高度。当浏览器重新定位时，div 应该相应地重新定位。

我已经在 FF 和 IE 中成功做到了这一点(每个 div 上只有 width: auto 和 100% height)，但 Safari 和 Chrome 仍然无法实现。奇怪的是，我不明白那些浏览器中发生了什么。虽然第一个 div 的行为符合我的要求，但每个 div 的高度越来越大，并且每个 div 中的绝对定位元素最终都位于页面底部的某个位置；一团糟。

可以在这里找到我正在尝试做的示例:http://konstfuck.se/test/

Answer 1

1) 您没有有效的 Doctype，因此您的页面将以 Quirks 模式呈现，如 Henri Sivonen wrote ,

[i]n the Quirks mode the browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s. Different browsers implement different quirks. In Internet Explorer 6, 7 and 8, the Quirks mode is effectively frozen IE 5.5. In other browsers, the Quirks mode is a handful of deviations from the Almost Standards mode.

2) 添加height: 100%到html和body。作为规范 says :

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

因此，如果您没有指定包含 block 的 height，如示例中的情况，height 将设置为 auto.