CSS div 100％高度问题
[英]css div 100% height issue
问题描述
So I have a html structure like this 
所以我有一个这样的html结构
html, body { height: 100%; margin: 0; padding: 0; } #container { height: 100%; min-width: 900px; min-height: 650px; background: #dddbd9 url('../images/bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; } #content { clear: both; height: 345px; position: relative; margin: 0 auto; width: 790px; padding: 20px; overflow: hidden; } #bottomBar { height: 100%; margin: 0 auto; width: 100%; padding: 0px; background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x; }
<body> <div id="container"> <div id="content"></div> <div id="bottomBar"></div> </div> </body>
Why the #bottomBar height stretches all the way for more than few hundred pixels while the bg image is just around 115px? 为什么#bottomBar高度一直延伸超过数百个像素，而bg图像仅在115px左右？
UPDATE: I actually don't wanna the bottomBar to be just 115. I want it to occupy the whole remaining area of the bottom, but not stretching over more than the window. 更新：实际上，我不想将bottomBar设置为115。我希望它占据底部的整个剩余区域，但不要超出窗口。 Thanks. 谢谢。
UPDATE2: So the #content is 345px, #container is 100%, there are actually some other divs in between content and bottomBar , how do I get the remaining height for the #bottomBar ? UPDATE2：所以#content是345px， #container container是100％，在content和bottomBar之间实际上还有一些其他div，如何获得#bottomBar的剩余高度？ I want to bottomBar to just occupy the remaining area. 我想bottomBar只是占据剩余的区域。
3 个解决方案
解决方案1
1 2011-09-14 19:39:30
Just set the div height explicitly, like height:115px, or write a server-side script to return the height of the image, if it is worth doing so. 只需显式设置div的高度（例如height：115px），或编写服务器端脚本以返回图像的高度（如果值得这样做）。 As mentioned by others, setting height (or width) to X% means X% of the container, and not of the background-image. 正如其他人提到的，将高度（或宽度）设置为X％表示容器的X％，而不是背景图像的X％。
解决方案2
0 2011-09-14 19:31:11
height: 100% means that the element will take 100% of the height of its container. height: 100%表示元素将占据其容器高度的100％。 So in this case, 100% of the height of the #container element. 因此，在这种情况下，#container元素的高度为100％。
It's not related to the background image. 它与背景图片无关。
Set height: 115px to make #bottomBar the same height as its background image: 设置height: 115px ，使#bottomBar与其背景图像的高度相同：
#bottomBar { height: 115px; margin:0 auto; width:100%; padding:0px; background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x; }
解决方案3
0 2011-09-14 19:31:35
尝试将样式更改为高度：自动吗？
#bottomBar { height: auto; margin:0 auto; width:100%; padding:0px; background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.