Question

所以我有一个像这样的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>

为什么#bottomBar高度一直延伸超过几百个像素，而bg图像只有115px左右？

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

UPDATE2：因此#content为345px，#container为100％，实际上内容和bottomBar之间存在其他一些div，如何获取#bottomBar的剩余高度{1}}？我希望bottomBar占据剩下的区域。

Answer 1

只需显式设置div高度，如height：115px，或编写服务器端脚本以返回图像的高度，如果值得这样做的话。如其他人所述，将高度（或宽度）设置为X％表示容器的X％，而不是背景图像。

Answer 2

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

它与背景图像无关。

设置height: 115px以使#bottomBar与其背景图像的高度相同：

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

Answer 3

尝试将样式更改为高度：自动？

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

css div 100％身高问题

3 个答案: