How to make a floated div 100% height of its paren

问题:

Here is the HTML:

<div id=\"outer\">
    <div id=\"inner\"></div>
    Test
</div>

And here is the CSS:

#inner {
  float: left;
  height: 100%;
}

Upon inspection with the Chrome developer tools, the inner div is getting a height of 0px.

How can I force it to be 100% of the height of the parent div?

回答1:

For #outer height to be based on its content, and have #inner base its height on that, make both elements absolutely positioned.

More details can be found in the spec for the css height property, but essentially, #inner must ignore #outer height if #outer\'s height is auto, unless #outer is positioned absolutely. Then #inner height will be 0, unless #inner itself is positioned absolutely.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id=\'outer\'>
    <div id=\'inner\'>
    </div>
    text
</div>

However... By positioning #inner absolutely, a float setting will be ignored, so you will need to choose a width for #inner explicitly, and add padding in #outer to fake the text wrapping I suspect you want. For example, below, the padding of #outer is the width of #inner +3. Conveniently (as the whole point was to get #inner height to 100%) there\'s no need to wrap text beneath #inner, so this will look just like #inner is floated.

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id=\'outer2\'>
    <div id=\'inner2\'>
    </div>
    text
</div>

I deleted my previous answer, as it was based on too many wrong assumptions about your goal.

回答2:

For the parent:

display: flex;

You should add some prefixes http://css-tricks.com/using-flexbox/

Edit: Only drawback is IE as usual, IE9 does not support flex. http://caniuse.com/flexbox

Edit 2: As @toddsby noted, align items is for parent, and its default value actually is stretch. If you want a different value for child, there is align-self property.

Edit 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

回答3:

Actually, as long as the parent element is positioned, you can set the child\'s height to 100%. Namely, in case you don\'t want the parent to be absolutely positioned. Let me explain further:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id=\'outer2\'>
    <div id=\'inner2\'>
    </div>
</div>

回答4:

As long as you don\'t need to support versions of Internet Explorer earlier than IE8, you can use display: table-cell to accomplish this:

HTML:

<div class=\"outer\">
    <div class=\"inner\">
        <p>Menu or Whatever</p>
    </div>
    <div class=\"inner\">
        <p>Page contents...</p>
    </div>
</div>

CSS:

.inner {
    display: table-cell;
}

This will force each element with the .inner class to occupy the full height of its parent element.

回答5:

I made an example resolving your problem.

You have to make a wrapper, float it, then position absolute your div and give to it 100% height.

HTML

<div class=\"container\">
    <div class=\"left\">\"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\" </div>
  <div class=\"right-wrapper\">
    <div class=\"right\">\"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\" </div>
  </div>
  <div class=\"clear\">&nbsp;</div>
</div>

CSS:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

Explanation: The .right div is absolutely positioned. That means that its width and height, and top and left positiones will be calculed based on the first parent div absolutely or relative positioned ONLY if width or height properties are explicitly declared in CSS; if they aren\'t explicty declared, those properties will be calculed based on the parent container (.right-wrapper).

So, the 100% height of the DIV will be calculed based on .container final height, and the final position of .right position will be calculed based on the parent container.

回答6:

Here it is a simpler way to achieve that:

1. Set the three elements\' container (#outer) display: table
2. And set the elements themselves (#inner) display: table-cell
3. Remove the floating.
4. Success.

#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

Thanks to @Itay in Floated div, 100% height

回答7:

If you\'re prepared to use a little jQuery, the answer is simple!

$(function() {
    $(\'.parent\').find(\'.child\').css(\'height\', $(\'.parent\').innerHeight());
});

This works well for floating a single element to a side with 100% height of it\'s parent while other floated elements which would normally wrap around are kept to one side.

Hope this helps fellow jQuery fans.

回答8:

This is a code sample for grid system with equal height.

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

Above is the CSS for outer div

#inner{
width: 20%;
float: left;
border: 1px solid;
}

Above is the inner div

Hope this help you

回答9:

This helped me.

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

Change right: and left: to set preferable #inner width.

回答10:

A similar case when you need several child elements have the same height can be solved with flexbox:

https://css-tricks.com/using-flexbox/

Set display: flex; for parent and flex: 1; for child elements, they all will have the same height.

回答11:

try

#outer{overflow: auto;}

show more options in: How do you keep parents of floated elements from collapsing?