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