Question

我需要你的帮助：

html, body和#content的高度为100％＆amp;＆amp; #toolbar的高度为50px，他是静态=＆gt;我需要计算#content的高度以填充内容而不使用滚动条
#content > .a的宽度必须为300px，#content > .b必须计算宽度以填充内容

jsfiddle.net ：

Answer 1

1）您可以使用CSS3 calc()函数（docs）和视口单元（vh，vw）（docs）。< / p>

#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-width s，布局可能会中断分配

浏览器支持viewport units，calc function来自Can I Use。

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

CSS - 100％高度/宽度问题

2 个答案: