Question

我在这个网站（以及其他网站）上做了很多研究，但我无法解决我的问题...... 在这个网站上：http://vintagebike.fr/t%C3%A9t%C3%A9/ 我希望每个部分都覆盖视口高度的100％...... 我设置在最小高度：每个人100％... 我设置了html，身高：100％

一些代码：

html{ overflow-y:scroll; font-size:100%; font-family:Arial,Helvetica,sans-serif; line-height:1.5; background:url(...) repeat top left; font-color:#353232; height:100%;}



body{ height:100%; background:#fff; float:left; width:100%; font-size:.8125em; color:#353232;}

#about{background-color: #cde2f3;position:relative;min-height:100%;}
#elements{background-color: #fbe2e4;position:relative;min-height:100%;}
#pourqui{background-color: #ffedc1;position:relative;min-height:100%;}
#contact{background-color: #ddeee4;position:relative;min-height:100%;}

如果我设置高度（以像素为单位）它正在工作......

我真的不明白......

提前致谢。

（对不起我的英文）

Answer 1

阅读percentage height的规范。它与视口无关。由于你有body {height:100%}，当BODY增长时，它将成为用于表示100％的元素，而不是视口。

您需要根据浏览器的视口大小使用JavaScript设置剖面高度。

Bonne chance。

指定百分比高度。百分比用计算相对于生成的框的包含块的高度。如果未明确指定包含块的高度（即，它取决于内容高度），这个元素不是绝对的定位后，该值计算为“auto”。高度的百分比根元素相对于初始包含块。注意：对于绝对定位的元素，其包含块基于a 块级元素，百分比是相对于该元素的填充框的高度。这是CSS1的变化，其中百分比总是根据内容计算父元素的框。

部分覆盖视口的100％高度

1 个答案: