Question

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

期望的结果：

How I'm wanting the app to look, layout wise.

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

Answer 1

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

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

JSFiddle

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

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

JSFiddle

2 个答案:

JSFiddle