Fill all remaining space

Question

I'm writing a webpage on which I need to have a div wrapper containing two divs (one toolbar and one editor). The toolbar heigth is not known, and I need to make the editor div fill all the remaining space within the wrapper.

The solution need to be full HTML + CSS.

<div id="wrapper">
  <div id="toolbar">
  </div>
  <div id="editor">
  </div>
</div>

For the CSS:

#wrapper {
  position: absolute; // I need this, I can't remove it
  top: 0; // should stick on the top
  height: 100%; // should span across the whole height
  width: 100%; // Can be anything 0 ≤ width ≤ 100%
}

#editor {
  width: 100%; // fill the whole horizontal space
  height: 100%; // if I do so, the div gets too high and the #editor goes beyond the wrapper limit
}

Here's a jsfidlle to play with http://jsfiddle.net/o3hqyxxu/

I forked it. I think this shows your problem better: http://jsfiddle.net/3du3w9r6/ — Reed, Jun 05 '15 at 16:07
I found the solution following http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1 using flexboxes. — cphyc, Jun 05 '15 at 16:09

score 0 · Answer 1 · answered Jun 05 '15 at 16:13

One option is to set the display of the divs to table and table-row:

#wrapper {
    position: absolute;
    top:0;
    height: 100%;
    width: 70%;
    display:table;
}
#a {
    background-color: grey;
    width: 100%:
}
#b {
    background-color: lightblue;
    height: 100%;
    width: 100%;
}
#a, #b {
    display:table-row;
}

<div id='wrapper'>
    <div id='a'>Some content that is long enough to fill a full line an even more, so you need to go back to the next line, … Ok, I think that is enough. If you have a wider screen, append text there :)</div>
    <div id='b'>I want this div to fill all the empty save, not more.</div>
</div>

score 0 · Answer 2 · answered Jun 05 '15 at 16:13

0

If I understood well, it seems to work for me if you use height:auto; instead of height:100% on the #editor.

answered Jun 05 '15 at 16:13

Corbac

95
2
8

score 0 · Answer 3 · answered Jun 05 '15 at 16:14

I found the solution to my answer by using flex boxes (see the mdn documentation).

The idea is to use the css descriptor display: flex and flex-flow: row for the container and the descriptor flex: 0 1 auto for the toolbar / editor.

There is a jsfiddle with a solution here.

Fill all remaining space

3 Answers3