100％高度不能按预期工作

在我的html中，有几个div。但这些都没有显示背景图像。当然，这是因为100％的财产不起作用。为什么发生这种情况？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); 
}

来源

2013-11-03 user2950255

min-width？我从来没有设置它。 – user2950255

以及只是指定宽度：100％会工作。如果你有一个空的div，并且你没有指定任何宽度和高度，它将有宽度和高度= 0 – sissy

什么100%？

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

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

body, html { 
    height: 100%; 
}

jsFiddle example - 它的工作原理。

来源

2013-11-03 16:57:40

css中的body和html有什么区别？ – user2950255

我们不是在谈论宽度吗？ – sissy

@ user2950255那么，简单地将父'body'设置为100％不起作用，原因完全相同 - 因为它也是0％。 'html'是'body'的父亲，因此你需要设置 - 因为它可以让文档的高度为100％。 –

您的div.section需要相对于另一个div才能达到100％的高度。

来源

2013-11-03 16:59:09 Thomas

所以将这些div分配给高度100％的工作？ – user2950255

不，你的父母的div需要有一个固定的高度才能工作。你也可以为你的身体分配：height：100％，html（cf：JoshC）。您可能还需要添加宽度;遵循与身高相同的规则。 – Thomas

100％高度不能按预期工作

回答

相关问题