100％高度不能按预期工作 [英] 100% height not working as expected
本文介绍了100％高度不能按预期工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的html中，有几个div。但这些都不显示背景图像。和，当然是因为100％的属性不工作。为什么会这样？
In my html, there're a couple of divs. but none of these is showing the background image. and, of course that's because 100% property is not working. why is this happening?
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);
}
推荐答案
您需要定义父级的尺寸才能使其生效，否则 100％ ， 0 。
You need to define the parent's dimensions in order for this to work, otherwise 100% of 0, is also 0%.
在这个例子中，由于父元素 body ，你必须同时设置它的高度和 html 到 100％。这样做，将允许子元素的高度 100％。
In this example, since the parent element is body, you would have to set both the height of that and html to 100%. Doing this, will allow for the child element to have a height of 100%.
body, html {
height: 100%;
}
jsFiddle示例 - 它可以正常工作。
jsFiddle example - it works.
这篇关于100％高度不能按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
