全高和全宽CSS布局 [英] Full height and full width CSS layout
问题描述
我正在寻找一种方法来创建一个仅包含CSS（无JavaScript）的布局，其中包含5个区域，如下所示：
I am looking for a way to create a CSS-only (no JavaScript) layout with 5 regions that looks like this:
┌────────────────────┐
│ H │
├────┬────────┬──────┤
│ │ │ │
│ │ │ │
│ │ │ │
│ A │ B │ C │
│ │ │ │
│ │ │ │
│ │ │ │
├────┴────────┴──────┤
│ F │
└────────────────────┘
（仅当您的字体具有Unicode框线图形字符时，上述图表才会正确显示。）
(The above diagram will display correctly only if your font has the Unicode box-line-drawing characters.)
必须完全填充Web浏览器中的可用空间（包括高度和宽度）。
A，B，C必须具有相同的高度;并且H和F必须具有相同的宽度。即，除了固定边际之外，在区域之间必须没有间隙。
区域内的元素应该知道他们的父级大小;这意味着如果我放置
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
<textarea style="width:100%;height:100%">Just a test</textarea>
在区域内，它将延伸到区域的全宽和高度。
在浏览器窗口的右侧没有滚动条（因为H，C和F的高度恰好加上浏览器客户端区域的高度）。
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).
这是非常容易做，如果你使用< table> 做布局。但我继续读，使用表格格式化是一件坏事，CSS是要走的路。
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.
我知道有W3C工作组，致力于扩展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.
我一直在寻找包含示例CSS布局的许多网页，但没有一个可以做我所描述的以上。这些布局中的大多数不是全高，或者列具有不同的高度，或者它们需要JavaScript。
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，没有人为列，没有< table> ）？当然，该解决方案应该与当前的Web浏览器配合使用。
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.
编辑：根据Gilsham提供的解决方案，我设法编写了一个示例页面，生成所需的CSS布局Firefox 3.5.5和IE8）：
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):
<!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，这对搜索引擎优化和屏幕阅读器;
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.
/ Frank
推荐答案
设置页眉和页脚高度，您必须以它们的样式设置它，以及.content填充和边距（这是否定版本）
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)
这篇关于全高和全宽CSS布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
