如何使 html 元素适合剩余高度？答案

【问题标题】：How do I make a html element fit the remaining height?如何使 html 元素适合剩余高度？
【发布时间】：2014-08-05 14:52:11
【问题描述】：

我目前正在努力使 node-webkit 应用程序适合当前窗口的高度。下面是我想要实现的目标的图像。

想要的结果：

HTML：

<body>
<div class="header">
  THIS IS A HEADER WITH LINKS AND THINGS
</div>

<div class="content">
  <div class="sidebar">
    SIDE BAR WITH MORE LINKS AND THINGS
  </div>
  <div class="mainarea">
    <div class="chatbox">
        SOME SORT OF BOX WITH THINGS IN
    </div>
      
    <form>
        <input name="q" placeholder="type something here"/>
        <input type="submit" value="Send"/>
    </form>
      
  </div>
</div>
</body>

CSS：

body {
    height: 100%;
}

.header {
    height: 80px;
    background-color: red;
}

.content {
    width: 100%;
    height: 100%;
}

.sidebar {
    float: left;
    width: 20%;
    height: 100%;
    background-color: yellow;
}

.chatbox {
    width: 100%;
    border-style: solid;
    border-width: 1px;
}

.mainarea {
    float: right;
    width: 80% !important;
    background-color: green;    
    height: 100%;
}

演示：

JSFiddle

【问题讨论】：

标签： html css layout node-webkit

【解决方案1】：

.mainarea/.sidebar 使用 display:table-cell 代替 float:right/left。还有：

body, html { height: 100%; margin:0; }
.content { width: 100%; height: calc(100% - 80px); display:table; }

JSFiddle

【讨论】：

仍然不适合该区域的高度：/
你不需要 display: table.. 关键是 height: 100%;对于 html 和高度：calc(100% - 80px);对于 .content。不过，我不确定 IE 对 calc() 的支持情况如何。

【解决方案2】：

你也可以使用 flexbox。

http://jsfiddle.net/tetm7/

HTML

<div class="main">
    <div class="header">HEADER</div>

    <div class="content">
        <div class="sidebar">SIDEBAR</div>

        <div class="box">TEXT BOX</div>
    </div>
</div>

CSS

html, body, .main {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 100px;
    background-color: red;
}

.content {
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    width: 100%;
    height: 100%;
    background-color: yellow;
}


.sidebar {
    background-color: orange;
    width: 200px;
}

.box {
    background-color: green;
    width: 300px;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
}

【讨论】：