Html 全高和全宽 CSS 布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3652591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full height and full width CSS layout
提问by
I am looking for a way to create a CSS-only (no JavaScript) layout with 5 regions that looks like this:
我正在寻找一种方法来创建具有 5 个区域的纯 CSS（无 JavaScript）布局，如下所示：
┌────────────────────┐
│ H │
├────┬────────┬──────┤
│ │ │ │
│ │ │ │
│ │ │ │
│ A │ B │ C │
│ │ │ │
│ │ │ │
│ │ │ │
├────┴────────┴──────┤
│ F │
└────────────────────┘
(The above diagram will display correctly only if your font has the Unicode box-line-drawing characters.)
（仅当您的字体具有 Unicode 框线绘制字符时，上图才能正确显示。）
The layout must fill the available space in the web browser completely (both height and width). A, B, C must have the same height; and H and F must have the same width. I.e., there must be no gaps between the regions, except for a fixed margin. The elements inside the region should know their parents size; that means, if I place
布局必须完全填满 Web 浏览器中的可用空间（高度和宽度）。A、B、C必须有相同的高度；H 和 F 必须具有相同的宽度。即，区域之间必须没有间隙，除了固定的边距。区域内的元素应该知道它们的父元素大小；这意味着，如果我放置
<textarea style="width:100%;height:100%">Just a test</textarea>
inside a region, it will extend to the full width and height of the region. There shall be no scroll bar at the right side of the browser window (because the heights of H, C, and F exactly add up to the browser client-area's height).
在一个区域内，它将延伸到该区域的整个宽度和高度。浏览器窗口右侧不应有滚动条（因为 H、C 和 F 的高度正好等于浏览器客户区的高度）。
This is super-easy to do if you are using a <table>to do the layout. But I keep reading that using tables for formatting is a bad thing and CSS is the way to go.
如果您使用 a<table>进行布局，这是非常容易做到的。但我一直读到使用表格进行格式化是一件坏事，而 CSS 是要走的路。
I am aware that there are W3C working groups that work on extending the CSS standard by features that would make the above layout very easy to implement. These standard extensions, however, are not currently implemented by most browsers; and I need a solution that works with current browsers.
我知道有 W3C 工作组致力于通过功能扩展 CSS 标准，使上述布局非常容易实现。然而，大多数浏览器目前还没有实现这些标准扩展。我需要一个适用于当前浏览器的解决方案。
I have been looking around the many web pages that contain sample CSS layouts, but none of them can do what I described above. Most of these layouts either are not full-height, or the columns have different heights, or they require JavaScript.
我一直在浏览许多包含示例 CSS 布局的网页，但没有一个可以执行我上面描述的操作。这些布局中的大多数要么不是全高，要么列具有不同的高度，或者它们需要 JavaScript。
Therefore, my question is: is it possible to create the above layout, using only CSS (no JavaScript, no faux columns, no <table>)? Of course, the solution should work with current web browsers.
因此，我的问题是：是否可以仅使用 CSS（没有 JavaScript，没有假列，没有<table>）创建上述布局？当然，该解决方案应该适用于当前的 Web 浏览器。
EDIT:Based on the solution provided by Gilsham, I managed to write a sample page that generates the desired CSS-only layout (tested with Firefox 3.5.5 and IE8):
编辑：基于 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>
One drawback is that the divs must be specified in a particular order which is bad for search-engine optimization and for screen readers; this, however, is not important for the intended web application.
一个缺点是必须按特定顺序指定 div，这对搜索引擎优化和屏幕阅读器不利；然而，这对于预期的 Web 应用程序并不重要。
/ Frank
/ 弗兰克
采纳答案by Gilsham
to set the header and footer height you have to set it in their style and also the .content padding and margin (this the negative version)
要设置页眉和页脚高度，您必须将其设置为它们的样式以及 .content 填充和边距（这是负面版本）
回答by Gan
Hi fmunkert (and others here:),
嗨 fmunkert（和其他人在这里:)，
I was just curious and thought want to try it out, so I fired up my notepad and come up with something like this:
我只是好奇并想尝试一下，所以我启动了我的记事本并想出了这样的东西：
<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>
and here's the output in Firefox:
这是 Firefox 中的输出：
and the output in IE8:
和 IE8 中的输出：
I tested this using Firefox 3 and IE8. Seems ok to me. Is this what you wanted? :)
我使用 Firefox 3 和 IE8 对此进行了测试。对我来说似乎没问题。这是你想要的吗？:)
Note 1: As mentioned by others, this may not be practical, but still it depends on what you / your clients want.
注 1：正如其他人所提到的，这可能不切实际，但这仍然取决于您/您的客户想要什么。
Note 2: If this is really what you wanted, you can edit the height and width values according to your need, and you should put those CSS rules into a separate CSS file instead of inline styles as a best practice.
注意 2：如果这确实是您想要的，您可以根据需要编辑高度和宽度值，并且您应该将这些 CSS 规则放入单独的 CSS 文件中，而不是内联样式作为最佳实践。
回答by hollsk
The reason you can't find any CSS to do this is because the CSS spec doesn't really allow you to meet all these conditions without using at least one of the options that you don't want to use.
您找不到任何 CSS 来执行此操作的原因是因为 CSS 规范并没有真正允许您在不使用至少一个您不想使用的选项的情况下满足所有这些条件。
The Holy Grail liquid layout is 100% CSS but does not meet your height criteria on its own: http://www.alistapart.com/articles/holygrail/
圣杯液体布局是 100% CSS，但本身不符合您的高度标准：http: //www.alistapart.com/articles/holygrail/
You can fake the height criteria with the footer by using this method: http://www.themaninblue.com/writing/perspective/2005/08/29/
您可以使用此方法使用页脚伪造高度标准：http: //www.themaninblue.com/writing/perspective/2005/08/29/
This 24Ways article has a full-height column method using absolute positioning which solves a few of your problems but creates a new one in that one of your columns is always going to overflow if the content expands: http://24ways.org/2008/absolute-columns
这篇 24Ways 文章有一种使用绝对定位的全高列方法，它解决了您的一些问题，但会创建一个新问题，因为如果内容扩展，您的一列总是会溢出：http: //24ways.org/2008 /绝对列
You will likely need to combine a number of methods to get something workable to your spec. I'd personally just use jquery because life is too short for messing around with CSS like this, but if you're dead-set on avoiding it, then prepare yourself for a lot of hacking around.
您可能需要结合多种方法来获得对您的规范可行的东西。我个人只是使用 jquery，因为生命太短暂了，不能像这样乱搞 CSS，但是如果你死心塌地避免它，那么请准备好自己进行大量的黑客攻击。
回答by Dave Everitt
There's no easy way to get an element to fill a given depth exactly when using percentage measurements.
在使用百分比测量时，没有简单的方法可以让元素准确地填充给定的深度。
You could get close by anchoring the footerat the window bottom, then - if cols A and C both share a background colour but col B's background differs, set your body (or container div if present) background colour to match cols A + C to seamlessly fill the gaps beneath of those columns if they're shorter than col B.
您可以通过将页脚锚定在窗口底部来接近，然后 - 如果 cols A 和 C 都共享背景颜色但 col B 的背景不同，则设置您的主体（或容器 div，如果存在）背景颜色以匹配 cols A + C如果这些列比 col B 短，则无缝填充这些列下方的间隙。
