Set floating div to height: 100%?

问题

I suspect there is no answer to this but I was wondering if there is a way to set the height of a floating div to 100%?

I have two divs within a wrapper div:

<div id="wrapper">
    <div id="left">
    </div>
    <div id="right">
    </div>
</div>

The right div has a set height and I want the left div to match it, so I created:

#wrapper {
    background-color: red;
    width: 200px;
    height: 100%;
    overflow: auto;
    padding: 5px;
}

#left{
    width: 90px;
    height: 100%;
    float:left;
    background-color: #ccc;
}

#right{
    width: 90px;
    height: 300px;
    float:right;
    background-color: blue;
}

but the left div doesnt expand. Fiddle here: http://jsfiddle.net/8dstK/2/

Would anyone know a way to achieve divs of equal height?

Should I just use JQuery to grab the height of right div and apply it to left div?

回答1:

You could do it by setting up a table-like scructure of <div>s in your HTML and then using display: table, display: table-cell, etc. This will work because table cells in the same row automatically resize to the same height as the tallest cell. However, IE7 and below do not support display: table.

jsFiddle

<div id="wrapper">
    <div id="inner-wrapper">
        <div id="left">
            left
        </div>
        <div id="right">
            right
        </div>
    </div>
</div>

#wrapper       { display: table; }
#inner-wrapper { display: table-row; }
#left          { display: table-cell; }
#right         { display: table-cell; }

I had to remove float: left and float: right from #left and #right to get the table-cell display to work, since table cells can’t float. However, this has stuck the two divs together. And table cells do not accept margins, only padding. You may need an extra display: table-cell div between left and right to separate them, if you don’t want padding separating them.

Read more about display: table and family on QuirksMode and on MDN.

回答2:

This is the way I know how to do it. With position absolute and top / bottom / left Updated your fiddle: http://jsfiddle.net/8dstK/3/

Basically, you make the wrapper div position relative so that child divs can be positioned absolutely within the wrapper. Next, we set the left div to be positioned absolutely and account for the padding in our positioning. Set the top to 5px, left to 5px and bottom to 5px. That should do it.

#wrapper {
    background-color: red;
    width: 200px;
    height: 100%;
    overflow: auto;
    padding: 5px;
    position:relative;
}

#left{
    width: 90px;
    float:left;
    background-color: #ccc;
    top:5px;
    left:5px;
    bottom:5px;
    position:absolute;
}

#right{
    width: 90px;
    height: 300px;
    float:right;
    background-color: blue;
}

回答3:

use the most used clearfix class at the parent div. this question is already available. check this link. How do you keep parents of floated elements from collapsing?

回答4:

There is an answer and with a solution. The height does not expand is because it is a <div> and <div> is a block level element.

If you want it to expand, you have to convert its display to table for it to expand.

Below is the working demo for the same.

WORKING DEMO

The HTML:

<div id="wrapper">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>

The CSS:

#wrapper {
    background-color: red;
    width: 200px;
    height: 100%;
    overflow: auto;
    padding: 5px;
    display:table;
}

#left{
    width: 90px;
    height: 100%;
    float:left;
    background-color: #ccc;
    display:table;
}

#right{
    width: 90px;
    height: 300px;
    float:right;
    background-color: blue;
}

回答5:

Make the parent element set to fixed height (say 300px) , then the children will automatically take the entire width of the parent on 100% as http://jsfiddle.net/8dstK/6/

 #wrapper {
        background-color: red;
        width: 200px;
        height: 300px;
        overflow: auto;
        padding: 5px;
    }

    #left{
        width: 90px;
        height: 100%;
        float:left;
        background-color: #ccc;
    }

    #right{
        width: 90px;
        height: 100%;
        float:right;
        background-color: blue;
    }

来源：https://stackoverflow.com/questions/17738826/set-floating-div-to-height-100