CODEWITHSUNDEEP
htmlcss
MRC
MRC

Reputation: 553

CSS - Automatic div height?

I have a main container where the whole site is based around.

Inside the container, other than all the headers, text & footers etc. I have some expandable div's which slide up and down, thus the need to have the overall height of the container to adjust to the size of the expanded divs.

Now, I have done this before just using: height:100%, but for some reason, that causes the border effects of the container to disappear. It only seems to work with a fixed height such as: height:1000px.

CSS:

   #container {
        position: relative;
        top: 5px;
        width: 980px;
        height: 100%;
        margin: 0 auto 0;
        box-shadow: 0 0 5px rgba(159,159,159,0.6);
        -o-box-shadow: 0 0 5px rgba(159,159,159,0.6);
        -webkit-box-shadow: 0 0 5px rgba(159,159,159,0.6);
        -moz-box-shadow: 0 0 5px rgba(159,159,159,0.6);
    }

HTML: (pretty much like this)

<div id="container">
  <div id="top-banner">
    <div id="logo"></div>
  </div>
  <div id="col1">text+expandable divs</div>
</div>

Am I doing something wrong?

Upvotes: 3

Views: 87396

Answers (3)

Alexandre Tranchant
Alexandre Tranchant

Reputation: 4551

It disappears, because with the 100% value, your container's height is the same as that of your body tag. So you have to extend your body and your html tags like this:

html{
   height: 95%;
}
body{
   height: 95%;
} 
#container {
    position: relative;
    top: 5px;
    width: 980px;
    height: 100%;
    margin: 0 auto 0;
    box-shadow: 0 0 5px rgba(159,159,159,0.6);
    -o-box-shadow: 0 0 5px rgba(159,159,159,0.6);
    -webkit-box-shadow: 0 0 5px rgba(159,159,159,0.6);
    -moz-box-shadow: 0 0 5px rgba(159,159,159,0.6);
}

On some browsers, you have to add min-height:95%.

Here is the solution : http://jsfiddle.net/axv5j/

Upvotes: 1

MRC
MRC

Reputation: 553

Added a wrapper, and set HTML, body to 100% height:

html, body {
    height: 100%;
}
#wrapper{
    height:100%;    
}

Then added:

    padding-bottom:150px;

to the container to increase the size enough to cover the content.

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15891

when you are setting height: 100%; as relative then this means that #container should have height 100% in relation to the parent of container id, which in this case should be body.

Set body,html{height:100%} and this should work!

Eg

<div id="wrapper">
  <div class="container">
  </div>
</div>

If you have to give 

.container
{
  height: 100%; 
  position: relative
}

then

#wrapper
{
 height:100%;
}

is a must!

Upvotes: 5

Related Questions