如何使用CSS进行边框布局？ [英] How can I make a border-layout using css?

问题描述

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

I want to create a border layout for a webapp, where there is a fixed size header and footer, a sidebar and a main center content that expands to fill the remaining space. Think of it like your browser, where the toolbars and statusbar have a fixed size, the sidebar can change size, but the website in the center expands to fill the remaining size.

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

edit: To clarify, I want to specify the height of the entire design in pixels, for example 600px. Then I want the sidebar and the center divs to expand down to fill the space available, even if their contents aren't large enough to fill the space. The webbrowser analogy can be used here too. Even if the page you are looking at in the browser isn't taller than the browser window, the browser doesn't resize.

有任何方法css？

推荐答案

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/

这篇关于如何使用CSS进行边框布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！