如何使html元素适合剩余高度？_Html_Css_Layout_Node Webkit

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

html css layout

如何使html元素适合剩余高度？,html,css,layout,node-webkit,Html,Css,Layout,Node Webkit,我目前正在努力使一个节点webkit应用程序适合当前窗口的高度。下面是我试图实现的一个图像所需结果： HTML: 演示：使用显示：表格单元格，而不是浮动：右/左。此外： body，html{高度：100%；边距：0；} .内容{宽度：100%；高度：计算（100%-80px）；显示：表格；} 你也可以用flexbox HTML 但是仍然不适合区域的高度：/n您不需要显示：table。。关键是身高：100%；对于html和高度：计算（100%-80px）；内容。不过，我不确定calc（）

我目前正在努力使一个节点webkit应用程序适合当前窗口的高度。下面是我试图实现的一个图像

所需结果：

HTML:

演示：

使用

显示：表格单元格

，而不是

浮动：右/左

。此外：

body，html{高度：100%；边距：0；}
.内容{宽度：100%；高度：计算（100%-80px）；显示：表格；}

你也可以用flexbox

HTML

但是仍然不适合区域的高度：/n您不需要显示：table。。关键是身高：100%；对于html和高度：计算（100%-80px）；内容。不过，我不确定calc（）在IE中的支持程度。

<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>

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

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

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

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

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