CSS高度：100％问题

Question

I'm trying to get the div wrapper to surround all the divs within it so depending on the amount of content the height of wrapper will grow.

I guessed that the way of doing this would be to set height: 100% but as you can see from the screen grab below, this is not the case.

Where it says 'No :-(' is what having height: 100% is doing where ideally I would like wrapper to be at the bottom where it says 'Yes' and I have drawn a red line.

Any help is much appreciated.

Answer 1

If you are using floats, giving the container overflow:hidden might fix the problem. If no fixed size is given to the div, this makes it stretch over the floated elements.

If you have absolutely positioned elements inside the container, it would be good to see the html/css for a solution.

Answer 2

Sounds like you need a clearfix.

http://css-tricks.com/snippets/css/clear-fix/

You'll want to define the clearfix class (as stated in the above link) add .clearfix to the #wrapper.

Answer 3

Can you post a link to the css? The first thing that comes to my mind is the position attribute of the divs inside the wrapper. If they are set to float or absolute they will not be contained in the wrapper. That is intended behavior. ie Here is a nice article about containing floats: http://complexspiral.com/publications/containing-floats/

If, as is likely, that is the problem, you can either relative-position the inside divs or, if you are using floats, you can add an invisible block-displayed hr at the end of the wrapper, like so:

<div id="wrapper">
            /*All divs to be contained here*/
            <hr style="display:block;clear:left;visibility:hidden;">
</div>

The clear:left; is what gets rid of the "floating" of the previous elements. THe 'left' should be changed according to your floats. More in the article above, this is the method i like best.