1

在我的 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);
}
4

2 回答 2

3

100%什么？

您需要定义父级的尺寸才能使其正常工作，否则100%,0也是0%。

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

body, html {
    height: 100%;
}

jsFiddle 示例- 它有效。

于 2013-11-03T16:57:40.103 回答
0

您的 div.section 需要相对于另一个 div 才能使 height: 100% 起作用。

于 2013-11-03T16:59:09.573 回答