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

高さ: 100% を機能させるには、div.section を別の div に対して相対的にする必要があります。

于 2013-11-03T16:59:09.573 に答える