CSS - 100% 高度/宽度问题

Question

我需要你的帮助：

1. html, body 和 #content 的高度为 100% && #toolbar 的高度为 50px，他是静态的 => 我需要计算 #content 的高度来填充没有滚动条的内容
2. #content > .a 的宽度必须为 300px，#content > .b 必须计算宽度以填充内容

jsfiddle.net：

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

Answer 1

1) 为此，您可以使用 CSS3 calc() 函数 (docs) 和视口单元 (vh, vw) (docs)。

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

2) 再次，您可以使用视口单位和calc() 函数：

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

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

在 JSFiddle 上：https://jsfiddle.net/hL7nxs6v/1/

请注意，如果您将窗口的宽度调整为小于300px + 一些合理的.b 宽度，如果没有分配任何合适的min-widths，布局可能会中断。

浏览器支持通过Can I Useviewport units、calc function。

Answer 2

这在 Chrome 中似乎对我有用。我之前从未使用过flex，所以我真的不知道支持是什么样的：

https://jsfiddle.net/eeesrkjr/

我给#content 提供了一个顶部填充来为标题留出空间，并且由于box-sizing:border-box; 它不会强制它超过100% 的高度。然后标题绝对位于该 50px 空间中。我简单地尝试将标题放入#content 中，以便不必绝对定位，但flex 正在做奇怪的事情。如果您对这些事物的交互方式有更好的了解，也许您可​​以尝试这条路线。

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>

样式：

* {
    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%;
}