css div 100％height issue [英] css div 100% height issue
问题描述
所以我有一个像这样的html结构。
So I have a html structure like this
<body>
<div id="container">
<div id = "content"></div>
<div id = "bottomBar"></div>
</div>
</body>
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; }
为什么#bottomBar高度一直延伸到超过几百个像素，只是大约115px？
Why the #bottomBar height stretches all the way for more than few hundred pixels while the bg image is just around 115px?
更新：我实际上不想让bottomBar只有115.我希望它占据底部的整个剩余区域，但不拉伸超过窗口。谢谢。
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. Thanks.
UPDATE2：所以#content是345px，#container是100％，实际上有一些其他div在内容和bottomBar之间，为#bottomBar？
UPDATE2: So the #content is 345px, #container is 100%, there are actually some other divs inbetween content and bottomBar, how do I get the remaining height for the #bottomBar? I want to bottomBar to just occupy the remaining area.
推荐答案
只要设置div的高度，比如height：115px，一个服务器端脚本返回图像的高度，如果值得这样做。正如其他人所提到的，将高度（或宽度）设置为X％表示容器的X％，而不是背景图像。
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. As mentioned by others, setting height (or width) to X% means X% of the container, and not of the background-image.
这篇关于css div 100％height issue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
