3 列和 2 列全屏（宽度和高度）布局 (CSS)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/574317/
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
3 and 2 column full screen (width & height) layouts (CSS)
提问by zSynopsis
I was wondering if there were any simple examples that did the following
我想知道是否有任何简单的例子可以做到以下几点
* A right and a left fixed column with a fluid center.
With full height and width and a header and footer.
* A single left fixed column with a fluid content column 2.
With full height and width and a header and footer.
* A single right fixed column with a fluid content column.
With Full height and width and a header and footer.
I've tried some methods (such as the ones listed on listapart) but they seemed really complicated and they used a lot of divs, or they just didn't support padding.
我尝试了一些方法（例如listapart 上列出的方法），但它们看起来非常复杂，并且使用了很多div，或者它们只是不支持填充。
Thanks in advance
提前致谢
采纳答案by alexmeia
The examples you found in alistapart.com are as complicated as they need to be, and every serious example that you can find about those layouts supports padding. You will find (and already found) a lot of good examples about it in the internet, just spend some time trying to understand them and you will see that they are not so complicated, in the end.
您在 alistapart.com 中找到的示例非常复杂，您可以找到的关于这些布局的每个重要示例都支持填充。你会在互联网上找到（并且已经找到）很多关于它的好例子，只要花一些时间尝试理解它们，你就会发现它们最终并没有那么复杂。
Anyway, I have a good demo layout similar to the second you are looking for, here: http://www.meiaweb.com/test/BMS_DM_NI/
无论如何，我有一个很好的演示布局，类似于您正在寻找的第二个，在这里：http: //www.meiaweb.com/test/BMS_DM_NI/
Basically, the html is this:
基本上，html是这样的：
<body>
<div id="head">
<h1>Title</h1>
</div>
<div id="main">
<div id="navigation">
<!-- navigation content -->
</div>
<div id="content">
<h2>Content Title</h2>
<p>
<!-- main content here -->
</p>
</div>
</div>
</body>
And the css is:
css是：
html {
overflow: auto;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
line-height: 1.5em;
}
#head {
height: 20px;
background-color: #666;
color: #AAA;
padding: 20px 20px;
}
#navigation {
width: 210px;
padding: 20px 20px;
background: #efefef;
border: none;
border-right: solid 1px #AAA;
float: left;
overflow: auto;
}
#content {
margin-left: 250px;
padding: 20px 20px;
}
I think it's simple enough, and it works in all modern browsers.
我认为它足够简单，并且适用于所有现代浏览器。
回答by Adnan
Check this site out:
看看这个网站：
http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm
http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm
Other layout examples from the above:
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
http://matthewjamestaylor.com/blog/perfect-3-column.htm
上面的其他布局示例：
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
http ://matthewjamestaylor.com/blog/perfect-3-column.htm
回答by Xanthir
I know that it's badwrong to do, and I'm a semantic coder through-and-through (that wasn't meant to rhyme), but I still use a single layout table to do columns.
我知道这样做是错误的，而且我是一个彻头彻尾的语义编码器（这不是为了押韵），但我仍然使用单个布局表来做列。
Why? It's interoperable and simple. It doesn't require ridiculous CSS hacks that just barelyhold things together (seriously, floats are meant for typography, notlayout). It displays identically in every browser in current use. It. Just. Works. It's a semantic hack, but sometimes you just gotta do what you gotta do.
为什么？它具有互操作性且简单。它不需要荒谬的 CSS hacks 只是勉强把东西放在一起（说真的，浮动是为了排版，而不是布局）。它在当前使用的每个浏览器中显示相同。它。只是。作品。这是一个语义黑客，但有时你只需要做你必须做的事情。
However, there is light on the horizon. The table-* display values for CSS make equal-height columns trivial, though they can still violate source order (you still need your left-most column to be before your center column, even if it's a nav section and should come near the end of your page code). IE8, and all non-IE browsers, support these already.
然而，地平线上有曙光。CSS 的 table-* 显示值使等高列变得微不足道，尽管它们仍然可能违反源顺序（您仍然需要最左边的列在中心列之前，即使它是导航部分并且应该接近末尾您的页面代码）。IE8 和所有非 IE 浏览器已经支持这些。
CSS3 Grids and CSS3 Template Layout will both solve this issue properly, but they're still quite a bit away from being usable. A coder can dream, though, right?
CSS3 Grids 和 CSS3 Template Layout 都可以很好地解决这个问题，但它们离可用还有一段距离。但是，编码员可以做梦，对吗？
回答by Diogenes
I have reworked my sample template so you can see all three of your requested formats in action.
我已经重新设计了我的示例模板，因此您可以看到所有三种请求的格式都在运行。
This is a CSS solution, no tables involved. I have set this up so the side columns are fixed width the header/footer are fixed height. Everything else is fluid.
这是一个 CSS 解决方案，不涉及表格。我已经设置了这个，所以侧栏的宽度是固定的，页眉/页脚的高度是固定的。其他一切都是流动的。
With all modern browsers, excepting for IE7, the content is centered both vertically and horizontally. IE7 has issues with its box model. I believe IE8 have these resolved.
对于除 IE7 之外的所有现代浏览器，内容都垂直和水平居中。IE7 的盒子模型有问题。我相信 IE8 已经解决了这些问题。
The center box does center vertically in IE7 because I nested a 1 cell table in the center div as a hack around IE7 box model problems. I know this is dumb and ugly but it was just to show it worked.
中心框在 IE7 中垂直居中，因为我在中心 div 中嵌套了一个 1 单元格表，作为解决 IE7 框模型问题的方法。我知道这既愚蠢又丑陋，但这只是为了表明它有效。
See it in action - Three Column Full Screen Layout
看到它在行动 -三列全屏布局
I am a bit surprised this answer did not garner a single vote or capture the bounty. It works, its simple, and it fulfills everything the OP asked for. Oh well.
我有点惊讶这个答案没有获得一票或获得赏金。它有效，简单，并且满足了 OP 所要求的一切。那好吧。
The CSS
CSS
DIV { text-align: center }
#h0, #f0 { float: left; clear: both }
#h1, #f1 { height: 100px; float: none; width: 800px }
#l0 { float: left; clear: left; }
#c0, #r0 { float: left; clear: none }
#l1, #r1 { width: 150px }
#c1 { width: 500px }
#l1, #r1, #c1 { height: 350px }
#h0, #f0 { background-color: orange }
#l0 { background-color: red }
#r0 { background-color: blue }
#c0 { background-color: yellow }
#h1, #f1, #l1, #r1, #c1
{ display: table-cell; vertical-align: middle; }
The HTML
HTML
<div id="h0"><div id="h1">
header
</div></div>
<div id="l0"><div id="l1">
left column
</div></div>
<div id="c0"><div id="c1">
<img alt="dilbert (3K)" src="../gif/dilbert.gif" height="82" width="80" />
</div></div>
<div id="r0"><div id="r1">
right column
</div></div>
<div id="f0"><div id="f1">
footer
</div></div>
回答by Franci Penov
You can also look at Layout Gala- 40 examples of different two and three percent and fizxed-sized column layouts.
您还可以查看Layout Gala- 40 个不同的 2% 和 3% 以及固定大小的列布局的示例。
回答by Garrett
http://www.alistapart.com/articles/holygrail
http://www.alistapart.com/articles/holygrail
That should be exactly what you need.
那应该正是您所需要的。
回答by JohannesH
Take a look at Yahoo's YUI: Grids builder.
看看雅虎的YUI: Grids builder。
回答by Blair Conrad
I found the Liquid two column layout at Floatutorialextremely helpful when setting up a full height two column layout - fixed left column with a stretchy right column, with a header and foot row to boot. In their example, they suggest the left column is used as navigation, but it could be anything.
我发现Floatutorial 上的Liquid 两列布局在设置全高两列布局时非常有用 - 固定左列，右列有弹性，有一个标题行和脚行可以启动。在他们的示例中，他们建议将左列用作导航，但它可以是任何内容。
With Floatutorial, not only do you get a sample HTML structure and CSS out of it, but when you're done, you understand whyyou have what you end up with.
使用 Floatutorial，您不仅可以从中获得示例 HTML 结构和 CSS，而且在完成后，您会明白为什么会得到最终结果。
I briefly tried the YUI: Grids builder as suggestd by @JohannesH, and had some small problems with it, but the worst problem is that it was so convoluted that I had no idea why it wasn't working, or why it was supposed to have done.
我按照@JohannesH 的建议简单地尝试了 YUI: Grids builder，并遇到了一些小问题，但最糟糕的问题是它太复杂了，我不知道为什么它不起作用，或者为什么它应该起作用完成了。
Edit:there's also a tutorial for a liquid three column layout(which I've not used), and a whole bunch of other tutorials that use floats.
编辑：还有一个关于液体三列布局的教程（我没有使用过），以及一大堆其他使用 floats 的教程。
回答by Xanthir
In response to a message from the original poster, here's how I would do the first request with a <table> (the others are trivial modifications):
响应来自原始海报的消息，以下是我将如何使用 <table> 执行第一个请求（其他都是微不足道的修改）：
<style>
body {
height: 100%;
}
#container {
height: 100%;
width: 100%;
border-collapse: collapse;
}
#top, #left, #center, #right, #bottom {
border: 1px solid black;
text-align: center;
vertical-align: center;
}
#left, #right {
width: 200px;
}
#top, #bottom {
height: 200px;
}
</style>
<table id="container">
<tr>
<td colspan=3 id="top">header</td>
</tr>
<tr>
<td id="left">left</td>
<td id="center">center</td>
<td id="right">right</td>
</tr>
<tr>
<td colspan=3 id="bottom">footer</td>
</tr>
</table>回答by David Robbins
There is a pre-fabbed css grid system that is based on the Golden Rule, and implements all types of column formats quite readily. Check out 960 Grid System. You can accomplish your goals without the use of tables. The nice thing that by using a pure CSS solution you can alter your layout more rapidly.
有一个基于黄金法则的预制 css 网格系统，可以很容易地实现所有类型的列格式。查看960 网格系统。您可以在不使用表格的情况下实现您的目标。通过使用纯 CSS 解决方案，您可以更快地更改布局，这是一件好事。
There is also a jQuery fluid implementationthat has a fluid layout that you may be interested in.
还有一个jQuery 流体实现，它具有您可能感兴趣的流体布局。
