全高和全宽CSS布局
我正在寻找一种方法来创建一个只有CSS(没有JavaScript)的布局,其中包含5个区域,如下所示:
??????????????????????
? H ?
??????????????????????
? ? ? ?
? ? ? ?
? ? ? ?
? A ? B ? C ?
? ? ? ?
? ? ? ?
? ? ? ?
??????????????????????
? F ?
??????????????????????
(仅当您的字体具有Unicode框线图字符时,上图才会正确显示.)
布局必须完全填充Web浏览器中的可用空间(高度和宽度).A,B,C必须具有相同的高度; 和H和F必须具有相同的宽度.即,除了固定的边距之外,区域之间必须没有间隙.区域内的元素应该知道父母的大小; 这意味着,如果我放置
<textarea style="width:100%;height:100%">Just a test</textarea>
在一个区域内,它将延伸到该区域的整个宽度和高度.浏览器窗口右侧不应有滚动条(因为H,C和F的高度恰好与浏览器客户区的高度相加).
如果您使用a <table>进行布局,这非常容易.但我一直在阅读,使用表格进行格式化是一件坏事,而CSS就是最佳选择.
我知道有些W3C工作组致力于通过使上述布局非常容易实现的功能来扩展CSS标准.但是,这些标准扩展目前还没有被大多数浏览器实现; 我需要一个适用于当前浏览器的解决方案.
我一直在寻找包含示例CSS布局的许多网页,但是没有一个能够完成我上面描述的内容.这些布局中的大多数都不是全高,或者列具有不同的高度,或者它们需要JavaScript.
因此,我的问题是:是否可以仅使用CSS创建上述布局(没有JavaScript,没有虚拟列,没有<table>)？当然,该解决方案应该适用于当前的Web浏览器.
编辑:根据Gilsham提供的解决方案,我设法编写了一个示例页面,生成所需的CSS-only布局(使用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应用程序并不重要.
/弗兰克
嗨fmunkert(和其他人在这里:),
我只是很好奇并且想要尝试一下,所以我把我的记事本点起来然后拿出这样的东西:
<html>
<head></head>
<body style="margin: 0px; padding: 0px; height: 100%; width: 100%; text-align: center;">
<div style="height: 100%; width: 100%;">
<div style="height:20%; width: 100%; text-align: center; background-color: orange;">H</div>
<div style="height:60%; width: 100%; display: table;">
<div style="float:left; height:100%; width: 20%; background-color: yellow;">A</div>
<div style="float:left; height:100%; width: 60%; background-color: grey;">B</div>
<div style="float:left; height:100%; width: 20%; background-color: yellow;">C</div>
</div>
<div style="height:20%; width: 100%; text-align: center; background-color: orange;">F</div>
</div>
</body>
</html>
这是Firefox中的输出:
和IE8中的输出:
我使用Firefox 3和IE8测试了这个.对我来说似乎没问题.这是你想要的吗？:)
注1:正如其他人所说,这可能不实用,但仍取决于您/您的客户想要什么.
注意2:如果这真的是您想要的,您可以根据需要编辑高度和宽度值,并且应该将这些CSS规则放入单独的CSS文件中,而不是内联样式作为最佳实践.