CSS：具有2列的全屏流体布局

Question

我正在寻找一个全屏（高度：100％，宽度：100％，所以没有滚动条）流体布局，带有标题和2个colomns，左边一个用于导航菜单，另一个用于导航菜单内容。谁能帮我？感谢。

Answer 1

FIDDLE

HTML

<div class='table'>
    <div class='header'>Header</div>
    <div class='row'>
        <div class='cell'>Menu</div>
        <div class='cell'>Content</div>
    </div>
</div>

CSS

* {
    box-sizing:border-box;
}
html, body {
    width:100%;
    height:100%;
    overflow:hidden;
    position:fixed;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
    table-layout:fixed;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    border:1px solid grey;
}
.header {
    display:table-header-group;
    border:1px solid grey;
}