如何使用css制作边界布局？

Question

我想创建一个web应用程序的边框布局，其中有一个固定大小的页眉和页脚，一个侧栏以及一个扩展以填充剩余空间的主要中心内容。把它想象成你的浏览器，工具栏和状态栏的大小固定，边栏可以改变大小，但是中心的网站会扩大以填充剩余的大小。

编辑：为了澄清，我想指定整个设计的像素高度，例如600px。然后，我想让边栏和中心div展开以填充可用空间，即使它们的内容不足以填充空间。网页浏览器比喻也可以在这里使用。即使您在浏览器中查看的页面不比浏览器窗口高，浏览器也不会调整大小。

有什么办法可以在css中做到这一点？

Answer 1

您参考听起来像是躯坚持工作的方法 - 这是老了，但工作的魅力还是...... the man in blue - footerStickAlt

Similar question here.

而且我敢肯定，如果你使用相同的该问题中的标准以及与运行搜索相关的问题，您会想到更多。

Answer 2

试Flexbox的，工作与Firefox和WebKit

http://www.html5rocks.com/en/tutorials/flexbox/quick/

目前的实现没有更新，但它是不够好

但你也许可以做到这一点与表（类似于在Flexbox的）

希望这有助于

Answer 3

div { border : 1px solid #d3d3e3 } 

#north { margin:0; padding:1em; }   
#south { margin:0; padding:1em; }   
#east  { margin:0; padding:1em; width:6em; height:22em; float:left; margin-right:1.1em }   
#west  { margin:0; padding:1em; width:6em; height:22em; float:right; margin-left:1.1em }   
#center { margin:0; padding:1em; padding-bottom:0em; }   
#center:after { content:' '; clear:both; display:block; height:0; overflow:hidden } 

<div id="north">North</div > 
<div id="east">East</div> 
<div id="west">West</div> 
<div id="center">Center</div> 
<div id="south">South</div> 

动态链接：http://jsfiddle.net/marrok/dGw6K/2/

Answer 4

CSS表格布局可以很好地处理这个问题。

.borderLayout { 
    display: table; 
    width: 100% 
} 

.borderLayout .top { 
    display: table-row; 
} 

.borderLayout .left { 
    display: table-cell; 
    vertical-align: middle; 
    width: 10%; 
    } 

.borderLayout .center { 
    display: table-cell; 
    vertical-align: middle; 
} 

.borderLayout .right { 
    display: table-cell; 
    vertical-align: middle; 
    width: 10%; 
    } 

.borderLayout .bottom { 
    display: table-row; 
} 

JSFiddle