css div 100% 高度问题答案

【问题标题】：css div 100% height issuecss div 100% 高度问题
【发布时间】：2017-06-19 16:18:35
【问题描述】：

所以我有一个这样的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 的高度一直延伸到几百像素，而背景图像只有大约 115 像素？

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

UPDATE2：所以#content 是345px，#container 是100%，实际上在内容和bottomBar 之间还有一些其他的div，我如何获得#bottomBar 的剩余高度？我想bottomBar只占剩下的区域。

【问题讨论】：

您希望#bottomBar 的高度与背景图像的高度相匹配？如果是这种情况，您将需要height: 115px。
你在问什么？您是否希望您的 #content 为 100% 高度，而 #bottomBar 采用固定高度？你想让它反过来吗？你想让它流动吗？我不明白你想要达到什么目的。
bg 图像是一个弧度，我想占据窗口的底部，而不仅仅是 115px。谢谢。

标签： html css

【解决方案1】：

只要明确设置 div 的高度，比如 height:115px，或者编写一个服务器端脚本来返回图像的高度，如果值得这样做的话。正如其他人所提到的，将高度（或宽度）设置为 X% 意味着 X% 的容器，而不是背景图像。

【讨论】：

【解决方案2】：

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; }

【讨论】：

【解决方案3】：

是否尝试将样式更改为 height: auto ？

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

【讨论】：

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