Last DIV fill remainder of parent DIV height (no JS or absolute position)

Question

I want div C to fill the remainder of the height of parent div A, while allowing the sibling div B to have adjustable height. Is this possible with just CSS (no javascript)?

Other similar questions have been answered by "position div C absolutely", but that doesn't work for me because I want div B to have a variable height depending on its content.

+---------------------------------------+
| D +---------------------------------+ |
| i | div B (min and variable height) | |
| v +=================================| |
|   |               ^                 | |
| A |               |                 | |
|   |              div C              | |
|   |      (remainder of height)      | |
|   |               |                 | |
|   |               v                 | |
|   +---------------------------------+ |
+---------------------------------------+

Answer 1

What if you set the top div to float: left and width: 100%?

I have tried to test it in JSFiddle and it seems to work.

Code is here .

Answer 2

This is probably not workable for you (only very modern browsers implement it), but it might be worth mentioning that the flexible box model is meant to solve problems like this. An example ( jsfiddle ):

HTML:

<div id="container">
    <div class="top">Hello there.</div>
    <div class="bottom">Hello to you as well!</div>
</div>

CSS:

body, html {
    height: 100%;
}

#container {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Set a hard-to-work-with height */
    height: 82%;
    border: 1px solid #000;
}

.top {
    -webkit-box-flex: 1;
}

.bottom {
    /* Emphasize that we want the bottom to take up more space */
    -webkit-box-flex: 10;
    background: #999;
}

EDIT: Further reading here: http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/

Answer 3

You can do this by "faking" a table , without using one.

Just set up a div structure to mimic the table's tr, td structure and set the CSS to display the div s as a table .

http://jsfiddle.net/Kyle_Sevenoaks/EYuNz/3/

(you click the div with content to add more, it shows you the variable height)

Answer 4

Here's another method.

Reference: jsFiddle

This one does not float the div and instead uses a #divWrapper to handle the internal #divTop and #divBottom requirements.

HTML:

<div id="divContent">

    <div id="divWrapper">

      <div id="divTop">
        <p>This is random webpage content for div B. <br />
           This is random webpage content for div B. <br />
           This is random webpage content for div B. <br />
           This is random webpage content for div B. <br />        
           The 'background-color' aqua is the size of this div B. <br />
            <b>Note CSS 'min-height' is optionally used for this div. </b>
        </p>
      </div>

      <div id="divBottom">
        <p>The remainder of the space is used by div C. Line 01 <br />
           The remainder of the space is used by div C. Line 02 <br />
           The remainder of the space is used by div C. Line 03 <br />
           The remainder of the space is used by div C. Line 04 <br />
           The remainder of the space is used by div C. Line 05 <br />
           The remainder of the space is used by div C. Line 06 <br />
           The remainder of the space is used by div C. Line 07 <br />
           The remainder of the space is used by div C. Line 08 <br />
           Since this div is secondary, contents may clip. Line 09 <br />
           The remainder of the space is used by div C. Line 10 <br />
           The remainder of the space is used by div C. Line 11 <br />
           The remainder of the space is used by div C. Line 12 <br />
           The remainder of the space is used by div C. Line 13 <br />
           The remainder of the space is used by div C. Line 14 <br />
          </p>
      </div>

    </div>

</div>

CSS:

#divContent {
    background-color: yellow;
    border: 3px solid red;
    width:400px;
    height: 400px;
}

#divWrapper {
    height: 90%;
    width: 90%;
    top: 5%;
    left: 5%;
    position: relative;
    border: 1px solid black;
    overflow: hidden;
}

#divTop {
    background-color: aqua;
    min-height: 155px;          /* Optional minimum height setting */
}

#divBottom {
    background-color: pink;
    width: 100%;
}


#divTop:hover, #divBottom:hover {
    background-color: white;
}