CODEWITHSUNDEEP
htmlcss
randomor
randomor

Reputation: 5673

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.

Upvotes: 2

Views: 3078

Answers (3)

Ali Alavi
Ali Alavi

Reputation: 2467

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.

Upvotes: 1

legendofawesomeness
legendofawesomeness

Reputation: 2911

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

Upvotes: 0

Arnaud Le Blanc
Arnaud Le Blanc

Reputation: 99919

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

Upvotes: 0

Related Questions