CSS - 100% height / width issue

Question

I need your help with:

1. html, body and #content have a height of 100% && #toolbar have a height of 50px and he is static => I need to calculate the height of #content to fill the content without scroll bar
2. #content > .a must have a width of 300px and #content > .b must calculate the width to fill the content

jsfiddle.net :

1. https://jsfiddle.net/4uesapnt/2/
2. https://jsfiddle.net/4uesapnt/2/embedded/result/

Answer 1

1) You can use the CSS3 calc() function ( docs ) and viewport units ( vh , vw ) ( docs ) for this.

#content {
    height: calc(100vh-50px); /* substract #toolbar height from the entire page's height*/
}

2) Once again, you can use viewport units and the calc() function:

#content > .a {
    width: 300px;
}

#content > .b {
    width: calc(100vw-300px); /* substract #content .a's width from the entire page's width */
}

Here it is on JSFiddle: https://jsfiddle.net/hL7nxs6v/1/

Please note that if you resize the window to be less in width than 300px + some reasonable width for .b , the layout might break if there aren't any appropriate min-width s assigned.

Browser support for viewport units , calc function via Can I Use .

Answer 2

This appears to work for me in Chrome. I've never used flex before so I don't really know what the support is like:

https://jsfiddle.net/eeesrkjr/

I gave the #content a top padding to leave space for the header, and because of box-sizing:border-box; it doesn't force it over the 100% height. Then then header is absolutely positioned in that 50px space. I experimented briefly with getting the header inside #content so as not to have to absolutely position, but flex was doing weird things. Perhaps you could try that route if you have a better understanding of how those things interact.

HTML:

<div id="toolbar" class="flex aic jcsb">
    <div class="a">A</div>

    <div class="b">B</div>

    <div class="c flex aic jcsb">
        <div class="b">C</div>
        <div class="c">D</div>
        <div class="d">E</div>
    </div>
</div>

<div id="content" class="flex">
    <div class="a">A</div>

    <div class="b">B</div>
</div>

Styles:

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background: #111;
    font-family: "Helvetica Neue";
    font-weight: 300;
}

#toolbar {
    background: linear-gradient(#333, #222);
    border-bottom: 1px solid #000;
    color: #bbb;
    height: 50px;
    padding: 0 25px;
    width:100%;
    position:absolute;
    top:0px;
}

#toolbar > .c > div {
    margin: 0 12.5px;
}

.flex {
    display: flex;
}

.flex.aic {
    align-items: center;
}

.flex.jcsb {
    justify-content: space-between;
}

.flex.fdc {
    flex-direction: column;
}

#content {
    color: #fff;
    height: 100%;
    padding-top:50px;
    box-sizing:border-box;
}

#content > .a {
    background: red;
    width: 300px;
    float:left;
}

#content > .b {
    background: blue;
    width:100%;
}