height - 覆盖视口(viewport) 100% 高度的部分

Question

我在这个网站(和其他网站)上做了很多研究，但我无法解决我的问题……在这个网站上:http://vintagebike.fr/t%C3%A9t%C3%A9/我希望每个部分都覆盖视口(viewport)高度的 100%……我设置了最小高度:每个 100%……我设置了 html，body 的高度: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 的规范.它与视口(viewport)无关。由于您有 body {height:100%}，随着 BODY 的增长，它成为用于表示 100% 的元素，而不是视口(viewport)。

您需要根据浏览器的视口(viewport)大小使用 JavaScript 设置部分高度。

好机会。

Specifies a percentage height. 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'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.