Question

我想为webapp创建一个边框布局，其中有一个固定大小的页眉和页脚，一个侧边栏和一个主要中心内容，可以扩展以填充剩余空间。您可以将其视为您的浏览器，其中工具栏和状态栏具有固定大小，侧边栏可以更改大小，但中心的网站会扩展以填充剩余大小。

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

在css中有没有办法做到这一点？

Answer 1

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 2

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