Getting around the CSS height issues

Question

Ok, so, anyone who has worked with css and html for long enough has probably dealt with the ridiculous issues of "height:100%". I've read some stuff on dealing with it, but it hasn't helped much. Below is a layout that I need to construct. I'm hoping that a good answer will help me with most other structures requiring height.
Rules:

• It must fill the browser window without giving any scrollbars.
• The heights of the containers must not go beyond the visible area (i.e. not requiring "overflow:hidden" on the html or body tags just to remove scrollbars)
• The FLEX areas should be adjustable to given pixel measurements, whereas the FILLER should fill whatever area is left available to it.
• All areas should be strictly sized such that their content should be cut off when overflowing, without making the area any bigger.
• If possible, I'd prefer to do it without "position:fixed" or "position:absolute", in case any time later I need such a structure inside some other wrapper, but for now I'll be glad if it's possible in any way.
• Lastly, I really don't want to use javascript for it.

+-------------------------------------------+
|                  FLEX /\                  |
|                       \/                  |
+-----------------------------------+-------+
|                                   |       |
|                                   |       |
|                                   |       |
|                                   |       |
|               /\                  |       |
|           < FILLER >              | FLEX  |
|               \/                  | <- -> |
|                                   |       |
|                                   |       |
|                                   |       |
|                                   |       |
+-----------------------------------+-------+

EDIT:
So far I found that I could achieve what @cimmanon was saying in his second example, plus eliminating the excess space on the side of the header. I did this by creating two tables (one for wrapping both the header and the other table, which wraps the content and sidebar), a bad practice. But if it's the only way to do it (while trying to stick with classic css, and avoid using hacks like flexbox), then I'm sticking with it.

I've still got one problem, which is also found in @cimmanon's second example: One of my rules state: All areas should be strictly sized such that their content should be cut off when overflowing, without making the area any bigger.. After adding a bunch of random boxes to each of the containers, I discovered that they push out the bottom two containers beyond the browser's bottom, creating a scrollbar. This is because of the annoying concept that height:100% means the browser's viewport height, or the content's height if it's taller - which in this case it is.

Is there any way around this?

Answer 1

The most elegant way to go about this is using Flexbox.

http://codepen.io/cimmanon/pen/rifzt

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#layout {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  /* fix for old Firefox */
  width: 100%;
}

#layout header {
  height: 10em;
  background: #ffffcc;
}

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 auto;
  -ms-flex: 1 auto;
  flex: 1 auto;
  /* fix for old Firefox */
  width: 100%;
}

#layout article {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

#layout aside {
  width: 15em;
  background: #ccccff;
}

<article id="layout">
  <header>
    <h1>Header Title</h1>
  </header>

  <div class="wrapper">
    <article>
      <h1>Another Title</h1>

      <p>...</p>
    </article>

    <aside>
      <h1>Aside Title</h1>

      <p>...</p>
    </aside>
  </div>
</article>

http://caniuse.com/flexbox

You could do this with the table/table-row/table-cell display properties instead, but you'll have to add a lot of extra markup to get it to work.

This almost works, but the header doesn't quite span the full width of the viewport. If you add enough elements, you might be able to do it.

http://tinker.io/38b0d

html {
    height: 100%;
}

body {
    display: table;
    width: 100%;
    height: 100%;
    background: yellow;
}

header {
    height: 10em;
    display: table-row;
}

article {
    display: table-row;
    height: 100%;
    width: 100%;
    background: grey;
}

article div, article aside {
    display: table-cell;
    height: 100%;
}

article aside {
    width: 10em;
    background: orange;
}

<header>Header</header>

<article>
    <div class="main">
        Remaining Space
    </div>

    <aside>
        Sidebar
    </aside>
</article>

Answer 2

give a fixed height to your wrapper and then divide height of flex and filler using percentage (eg.flex=25% and filler=75%) or you will have to use javascript(window.innerHeight) for getting the height of window that page is viewed in.