3列和2列全屏（宽度和高度）布局（CSS）
我想知道是否有任何简单的例子可以做到以下几点 * 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. *具有流体中心的左右固定柱。 具有完整的高度和宽度以及页眉和页脚。 *带有流体含量列2的单个左侧固定列。 具有完整的高度和宽度以及页眉和页脚。 *具有流体内容列的单个右侧固定列。 具有完整的高度和宽度以及页眉和页脚。 我尝试过一些方法（比如listapart上列出的方法），但它们看起来非常复杂，并且使用了很多div，或者它们不支持填充 提前感谢查看此网站： 上面的其他布局示例：3列和2列全屏（宽度和高度）布局（CSS）,css,xhtml,Css,Xhtml,我想知道是否有任何简单的例子可以做到以下几点 * 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 an
您还可以查看-40个不同的百分之二和百分之三以及固定大小的列布局示例。 这正是你所需要的。看看雅虎。我发现在设置全高两列布局时非常有用-固定左列，右列有弹性，有一个页眉和脚行引导。在他们的示例中，他们建议将左列用作导航，但它可以是任何内容 使用Floatutorial，您不仅可以从中获得示例HTML结构和CSS，而且当您完成时，您可以理解为什么会得到最终的结果 我简单地试用了@JohannesH建议的YUI:Grids builder，但它有一些小问题，但最糟糕的问题是它太复杂了，我不知道它为什么不工作，或者为什么它应该工作
编辑：还有（我没有用过）和一大堆。我知道这样做是不对的，我是一个彻头彻尾的语义编码员（这并不意味着押韵），但我仍然使用一个布局表来做列 为什么?？它具有互操作性和简单性。它不需要荒谬的CSS技巧，这些技巧仅仅是把东西放在一起（说真的，浮动是为了排版，而不是布局）。它在当前使用的每个浏览器中显示相同。信息技术只是作品这是一个语义黑客，但有时你只需要做你该做的 然而，地平线上仍有光明。CSS的表-*显示值使得等高列变得微不足道，尽管它们仍然可能违反源代码顺序（您仍然需要最左边的列位于中间列之前，即使它是导航部分，并且应该位于页面代码的末尾）。IE8和所有非IE浏览器都已经支持这些了
CSS3网格和CSS3模板布局都能很好地解决这个问题，但它们离可用还有一段距离。不过，程序员可以做梦，对吗？我已经修改了我的示例模板，这样您就可以看到所有三种请求的格式都在运行 这是一个CSS解决方案，不涉及表。我已经设置好了，这样边栏的宽度是固定的，页眉/页脚的高度是固定的。其他一切都是流动的 除了IE7之外，所有现代浏览器的内容都是垂直和水平居中的。IE7的盒子模型有问题。我相信IE8已经解决了这些问题 在IE7中，中心框是垂直居中的，因为我在中心div中嵌套了一个1单元格的表，作为对IE7框模型问题的一种破解。我知道这是愚蠢和丑陋的，但它只是为了表明它的工作 看到它在行动- 我有点惊讶，这个答案没有赢得一张选票，也没有获得赏金。它工作正常，简单，并且满足OP要求的所有内容。哦，好吧 CSS HTML
标题
左列
右栏
页脚
身体{
身高：100%；
}
#容器{
身高：100%；
宽度：100%；
边界塌陷：塌陷；
}
#上、左、中、右、下{
边框：1px纯黑；
文本对齐：居中；
垂直对齐：居中；
}
#左，#右{
宽度：200px；
}
#上，#下{
高度：200px；
}
标题
左边
居中
正确的
页脚
还有一个具有流体布局的，您可能会感兴趣。这应该有您所需要的一切： 以及解决所有CSS问题的更通用的解决方案：
您在alistaspart.com中找到的示例非常复杂，您可以找到的每个关于这些布局的严肃示例都支持填充。你会在互联网上找到（并且已经找到）很多关于它的好例子，只要花点时间试着去理解它们，你最终会发现它们并不那么复杂 无论如何，我有一个很好的演示布局，类似于您正在寻找的第二个，如下所示： 基本上，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>
我认为它足够简单，并且适用于所有现代浏览器。您应该查看弹性CSS框架：
干杯。不过，那些没有整页高的栏目。除非我遗漏了什么？对不起，我应该让你看到那页上的其他标签页（我刚刚抄了我的书号）。。其他选项卡有2列、3列、左/右、整页等：选项卡朝向顶部。我已经研究过了，但我无法让它们的高度占据整个页面，除非有内容占据整个页面。它保持相等的列，但我希望这些列占据整个页面，不管内容是否足够。保重+1。这真是太棒了。我
<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>
<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><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>
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;
}