Question

我正在寻找一种创建仅限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的高度恰好与浏览器客户区的高度相加）。

如果您使用<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应用程序并不重要。

/ Frank

Answer 1

http://jsfiddle.net/aGG3V/

设置页眉和页脚高度，你必须在它们的样式中设置它，还有.content填充和边距（这是负面版本）

Answer 2

你好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中的输出：

Firefox Screenshot

和IE8中的输出：

IE8 screenshot

我使用Firefox 3和IE8对此进行了测试。对我来说似乎没问题。这是你想要的吗？：）

注1：正如其他人所说，这可能不实用，但仍取决于您/您的客户想要的内容。

注意2：如果这真的是您想要的，您可以根据需要编辑高度和宽度值，并且应该将这些CSS规则放入单独的CSS文件中，而不是内联样式作为最佳实践。

Answer 3

你无法找到任何CSS的原因是因为CSS规范并不真正允许你在不使用至少一个你不想使用的选项的情况下满足所有这些条件。

圣杯液体布局是100％CSS，但不能单独满足您的身高标准：http://www.alistapart.com/articles/holygrail/

您可以使用此方法使用页脚伪造高度标准： http://www.themaninblue.com/writing/perspective/2005/08/29/

这篇24Ways文章有一个使用绝对定位的全高列方法，可以解决您的一些问题，但会创建一个新的问题，因为如果内容扩展，您的某个列总会溢出：http://24ways.org/2008/absolute-columns < / p>

您可能需要结合多种方法来获得适合您规范的内容。我个人只是使用jquery，因为生活太短暂，不能像这样乱搞CSS，但如果你已经死定了，那么就要为自己做好准备。

Answer 4

使用百分比测量时，没有简单的方法可以让元素精确地填充给定深度。

你可以在窗口底部靠近anchoring the footer，然后 - 如果cols A和C都共享一个背景颜色但col B的背景不同，设置你的身体（或容器div，如果有的话）背景颜色来匹配cols A + C如果它们比col B短，则无缝填充这些列下面的间隙。

全高和全宽CSS布局

4 个答案: