本文介绍了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 example - it works.
这篇关于100%高度不能按预期工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!