CSS居中的div

Question

I have a centered div on my site, using a fixed width and margin:0 auto;

All looks fine in IE, but on FF, for the pages with long content, only the top part of the div has the proper div color, and the rest has the body background color.

what I'm doing wrong?

many thx

Answer 1

Without seeing your code it's hard to tell, but my bet is that you've set the div height to %100, which means 100% of the viewport.

It will not stretch beyond that, even if the content is long enough. This is the correct behaviour.

To make it the full scree height when there's not enough content, and go beyond the viewport height when there's more than enough content, you'll need to use two divs.

Here's an example I've hosted:

Div height 100% fix

Answer 2

If you know the width (ie:600px) and height of the div you can use the following. I center divs in one direction using 3 parameters:

Horizontal:

<div class='hcnt'>Some H Centered Text</div>

CSS:

.hcnt{
 left-margin:50%;
 width:600px;
 left:-300px;
}

Vertical:

<div class='vcnt'>Some V Centered Text</div>

CSS:

.vcnt{
     top-margin:50%;
     height:400px;
     top:-200px;
    }

Both:

<div class='hcnt vcnt'>Some completely Centered Text</div>