html - 如何解决介绍页高度

Question

我想创建一个介绍页面，其图像背景将覆盖整个窗口。

但是我在 100% 高度方面遇到问题。当我将高度设置为 100% 时，不会显示图像；当我更改高度(例如:500px)时，则会显示图像。

这里有什么问题吗？ 注意:图像随窗口大小变化而变化。

这是CSS:

.header {
    display: table;
    height: 100%;
    width: 100%;
    position: relative;
    background: url(../img/intro.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这是 html 代码:

<section class="header"> </section>

我知道存在一些类似的问题，并且我已经检查过它们，但我不知道在我的示例中是什么原因导致的。

这是 fiddle : http://jsfiddle.net/haris244808/r8EMz/

Answer 1

您的问题是您告诉 .header 为父元素宽度的 100%，而父元素可能没有设置宽度。您可以做两件事中的一件。

首先，正如 Nucleo 所说，将 .header 更改为 position:absolute。这将告诉它窗口的宽度为100%，而不是父窗口。您需要添加以下 CSS:

.header {position:absolute;}

第二个选项是给父级一个宽度。您可以添加以下 CSS:

body, html {width:100%; height:100%;}

<强> Working Fiddle

这给你带来的好处是不必绝对定位第一张图片，因此它仍然会推低其他东西。

编辑:我已将新代码(第二种方法)添加到您的 Fiddle 中，它可以工作并且响应迅速。

<强> Second Fiddle