我正在寻找一种方法来创建一个仅CSS(无
JavaScript)布局,其中有5个区域如下所示：
┌────────────────────┐ │ H │ ├────┬────────┬──────┤ │ │ │ │ │ │ │ │ │ │ │ │ │ A │ B │ C │ │ │ │ │ │ │ │ │ │ │ │ │ ├────┴────────┴──────┤ │ F │ └────────────────────┘
(仅当您的字体具有Unicode框线绘图字符时,上图才会正确显示.)
布局必须完全填写网络浏览器中的可用空间(高度和宽度).
A,B,C必须具有相同的高度; H和F必须具有相同的宽度.也就是说,除固定利润之外,区域之间不能有差距.
区域内的元素应该知道他们的父母的大小;这意味着,如果我放置
<textarea style="width:100%;height:100%">Just a test</textarea>
在一个区域内,它将延伸到该区域的全宽和高度.
在浏览器窗口的右侧不应有滚动条(因为H,C和F的高度恰好与浏览器客户区的高度相加).
如果您使用的是< table>,则这是非常容易的做布局.但是我继续阅读,使用表格进行格式化是一件坏事,CSS是要走的路.
我知道有W3C工作组通过功能扩展CSS标准,使上述布局非常容易实现.然而,这些标准扩展目前尚未被大多数浏览器实现;我需要一个适用于当前浏览器的解决方案.
我一直在寻找包含CSS样式样本的许多网页,但是没有一个可以做上述的描述.大多数这些布局既不是全高度的,或者列具有不同的高度,或者它们需要JavaScript.
因此,我的问题是：是否可以创建上述布局,只使用CSS(没有JavaScript,没有人造柱,没有< table>)？当然,该解决方案应该与当前的Web浏览器配合使用.
编辑：根据Gilsham提供的解决方案,我设法编写一个示例页面,生成所需的仅CSS布局(使用Firefox 3.5.5和IE8进行测试)：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
border:0;
}
div{
margin:0;
border:0;
}
textarea {
margin:0;
border:0;
padding:0;
height:100%;
width:100%;
}
.content{
display:table;
width:100%;
border-collapse:separate;
height:80%;
}
.Col{
display:table-cell;
width:30%;
height:100%;
}
#header,#footer{
height:10%;
position:relative;
z-index:1;
}
</style>
</head>
<body>
<div id="header"><textarea style="background-color:orange;">H Just a test</textarea></div>
<div class="content">
<div id="left" class="Col"><textarea style="background-color:lightskyblue;">A Just a test</textarea></div>
<div id="center" class="Col"><textarea style="background-color:green;">B Just a test</textarea></div>
<div id="right" class="Col"><textarea style="background-color:lime;">C Just a test</textarea></div>
</div>
<div id="footer"><textarea style="background-color:yellow;">F Just a test</textarea></div>
</body>
</html>
一个缺点是必须以特定的顺序指定div,这对搜索引擎优化和屏幕阅读器是不利的;但是,对于预期的Web应用程序来说,这并不重要.
/弗兰克
解决方法
http://jsfiddle.net/aGG3V/
设置页眉和页脚的高度,你必须设置它的风格以及.content的填充和边距(这是负版本)
