CSS度100％的高度问题

所以我有一个HTML结构这样CSS度100％的高度问题

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>

为什么#bottomBar高度一直延伸超过几百个像素以上，而背景图片仅仅是大约115px？

更新：我其实不想bottomBar只是115.我希望它占据底部的整个剩余区域，但不能超过窗口。谢谢。

UPDATE2：所以#content为345px，#container是100％，其实还有一些其他的div的内容和bottomBar之间，我怎么了#bottomBar剩下的高度？我想bottomBar只占据剩余的区域。

来源

2011-09-14 randomor

您希望#bottomBar的高度与背景图片的高度相匹配吗？如果是这样的话，你需要'height：115px'。 – jmar777

你在问什么？你想让你的'＃content'达到100％的高度，'＃bottomBar'具有固定的高度吗？你想让它成为另一种方式吗？你想让它变得流畅吗？我无法理解你想达到的目标。 – Nightfirecat

bg图像是我想要占据窗口底部的radien，而不仅仅是115px。谢谢。 – randomor

height: 100%表示该元素将占据其容器高度的100％。所以在这种情况下，#container元素的高度为100％。

它与背景图片无关。

设置height: 115px使#bottomBar相同的高度，它的背景图片：

#bottomBar { height: 115px; margin:0 auto; width:100%; padding:0px; background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x; }

来源

2011-09-14 19:31:11 arnaud576875

感谢您的回答。我在更新中完成了自己的目标。 :) – randomor

试图改变风格为height：auto？

#bottomBar { height: auto; margin:0 auto; width:100%; padding:0px; background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x; }

来源

2011-09-14 19:31:35 legendofawesomeness

对不起，我不是很清楚。但将其设置为auto将确实只会使它成为115px，这不是我想要的。我希望它占据整个剩余的窗口区域。 – randomor

只需设置的div高度明确，像高度：115px，或者写一个服务器端脚本返回图像的高度，是否值得这样做。正如其他人所提到的，将高度（或宽度）设置为X％表示容器的X％，而不是背景图像的X％。

来源

2011-09-14 19:39:30 Lazarus

CSS度100％的高度问题

回答

相关问题