Question

在我的HTML中，有几个div。但这些都没有显示背景图像。当然那是因为100％的财产不起作用。为什么会这样？

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <div class="section" id="home">
    </div>
    <div class="section" id="about">
    </div>
    <div class="section" id="team">
    </div>
    <div class="section" id="work">
    </div>
    <div class="section" id="blog">
    </div>
    <div class="section" id="contact">
    </div>
</body>
</html>

CSS

.section {
    height: 100%;
    overflow: hidden;
}

#home {
    background-image: url(img1.jpg);
}

#about {
    background-image: url(img2.jpg);
}

#team {
    background-image: url(img1.jpg);
}

#work {
    background-image: url(img2.jpg);
}

#blog {
    background-image: url(img1.jpg);
}

#contact {
    background-image: url(img2.jpg);
}

Answer 1

100%什么？

您需要定义父级的维度才能使其生效，否则100%的{{1}}也是0。

在此示例中，由于父元素为0%，因此您必须将其高度和body都设置为html。这样做，将允许子元素的高度为100%。

100%

jsFiddle example - 它有效。

Answer 2

你的div.section需要相对于另一个div才能达到高度：100％才能正常工作。

100％高度未按预期工作

2 个答案: