Question

我想要的是让mutliple div彼此相继，每个都是浏览器/视口的全宽和高度。当重新设置浏览器时，div应该相应地重新设置。

我已经成功地在FF和IE中做到了这一点（只有宽度：自动和每个div的100％高度），但是Safari＆amp; Chrome仍然无法获得它。奇怪的是，我不知道那些浏览器发生了什么。虽然第一个div的行为与我想要的方式相同，但每个div的高度变得越来越大，而每个div中的absolut定位元素在页面底部的某处结束upp;这是一团糟。

我想要做的一个例子可以在这里找到：http://konstfuck.se/test/

Answer 1

1）您没有有效的Doctype，因此您的页面将以Quirks模式呈现，并且像Henri Sivonen wrote一样，

[i] n Quirks模式的浏览器违反当代网络格式规格以避免 “打破”页面根据在美国流行的做法 90年代后期。不同浏览器实现不同的怪癖。在 Internet Explorer 6,7和8 ,. Quirks模式有效地冻结了IE 5.5。在其他浏览器中，Quirks模式有一些偏差几乎标准模式。

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

百分比的计算方法是尊重生成的高度方框containing block。如果高度包含块的不是明确指定（即，它取决于在内容高度）和这个元素不是绝对的定位，值计算为'auto'。

因此，如果您未指定包含块的height，例如，示例中的height设置为auto。

Answer 2

奇怪的行为......我怀疑问题是BODY元素随着div的大小而增长，因此每个人都有100％的高度分配它会增长 - 并且下一个大的高度更大。

尝试将它们全部包裹在div中，给它100％的高度并查看它是否能解决问题。

<div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

Answer 3

<强> HTML

<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>

<强> CSS

html, body {
    height: 100%;
}

div {
    height: 100%;
}

测试here。

注意：仅在FF和Chrome中测试过。

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

3 个答案: