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

Question

我正在寻找一种全屏(高度:100％，宽度:100％，所以没有滚动条)流体布局，带有标题和 2 列，左侧一个用于导航菜单，右侧一个用于导航菜单内容。谁能帮我？谢谢。

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