css div 100% height issue

问题

So I have a html structure like this

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?

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: 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? I want to bottomBar to just occupy the remaining area.

回答1:

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.

回答2:

height: 100% means that the element will take 100% of the height of its container. So in this case, 100% of the height of the #container element.

It's not related to the background image.

Set height: 115px to make #bottomBar the same height as its background image:

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

回答3:

Have tried changing the style to height: auto ?

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

来源：https://stackoverflow.com/questions/7421888/css-div-100-height-issue

标签

html

css

css3