3 列和 2 列全屏（宽度和高度）布局 (CSS)

Question

我想知道是否有任何简单的例子可以做到以下几点

* 带有流体中心的左右固定柱。 具有完整的高度和宽度以及页眉和页脚。 * 一个带有流体含量列的左侧固定列 2。 具有完整的高度和宽度以及页眉和页脚。 * 一个带有流动内容列的右固定列。 具有完整的高度和宽度以及页眉和页脚。

我尝试了一些方法（例如 listapart 中列出的方法），但它们看起来非常复杂，并且使用了很多 div，或者它们只是不支持填充。

提前致谢

Answer 1

看看这个网站：

http://matthewjamestaylor.com/blog/perfect-stacked-columns.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

Answer 2

您在 alistapart.com 中找到的示例非常复杂，而且您可以找到的关于这些布局的每个重要示例都支持填充。您会在互联网上找到（并且已经找到）很多关于它的好例子，只需花一些时间尝试理解它们，最终您会发现它们并没有那么复杂。

无论如何，我有一个很好的演示布局，类似于您正在寻找的第二个，这里： http://www.meiaweb.com/test/BMS_DM_NI/

基本上，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是：

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;
}

我认为它很简单，并且适用于所有现代浏览器。

Answer 3

我知道这样做是错误的，而且我是一个彻头彻尾的语义编码员（这并不意味着押韵），但我仍然使用单个布局表来做列。

为什么？它具有互操作性且简单。它不需要只是几乎 将事物组合在一起的荒谬的 CSS hack（说真的，浮动是用于排版，不是布局）。它在当前使用的每个浏览器中都以相同的方式显示。它。只是。作品。这是一种语义黑客，但有时你只需要做你必须做的事。

然而，地平线上有曙光。 CSS 的 table-* 显示值使等高列变得微不足道，尽管它们仍然可能违反源顺序（您仍然需要最左边的列位于中心列之前，即使它是导航部分并且应该接近结尾您的页面代码）。 IE8 和所有非 IE 浏览器已经支持这些。

CSS3 Grids 和 CSS3 Template Layout 都可以很好地解决这个问题，但距离可用还有很长的路要走。不过，程序员可以做梦，对吧？

Answer 4

您还可以查看Layout Gala - 40 个不同的 2% 和 3% 以及固定大小的列布局示例。

Answer 5

我重新设计了我的示例模板，因此您可以看到您请求的所有三种格式的实际效果。

这是一个 CSS 解决方案，不涉及表格。我已经设置好了，所以侧栏的宽度是固定的，页眉/页脚的高度是固定的。其他一切都是流动的。

对于所有现代浏览器，除了 IE7，内容都是垂直和水平居中的。 IE7 的盒子模型存在问题。我相信 IE8 已经解决了这些问题。

中心框在 IE7 中垂直居中，因为我在中心 div 中嵌套了一个 1 单元格表，作为解决 IE7 框模型问题的技巧。我知道这既愚蠢又丑陋，但这只是为了表明它有效。

查看实际操作 - Three Column Full Screen Layout

我有点惊讶这个答案没有获得一票或获得赏金。它可以工作，很简单，并且可以满足 OP 所要求的一切。哦，好吧。

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; }

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>

Answer 6

http://www.alistapart.com/articles/holygrail

这应该正是您所需要的。

Answer 7

看看雅虎的YUI: Grids builder。

Answer 8

我发现Liquid two column layout at Floatutorial 在设置全高两列布局时非常有用 - 固定左列和可拉伸的右列，并带有标题行和脚行引导。在他们的示例中，他们建议将左列用作导航，但它可以是任何东西。

使用 Floatutorial，您不仅可以从中获得示例 HTML 结构和 CSS，而且当您完成后，您会了解为什么您最终会得到什么。

我按照@JohannesH 的建议简要尝试了 YUI: Grids builder，但遇到了一些小问题，但最糟糕的问题是它太复杂了，我不知道为什么它不起作用，或者为什么它不起作用应该已经完成​​了。

编辑：还有a tutorial for a liquid three column layout（我没用过），还有一大堆other tutorials that use floats。

Answer 9

针对原发帖者的消息，下面是我将如何使用

执行第一个请求（其他都是微不足道的修改）：

<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>

【讨论】：

• 谢谢。我已经尝试过了，但它似乎并没有占据页面的整个高度。我错过了什么吗？
• 你试过这个特定的代码吗？您会看到它确实填满了页面的高度。如果您的个人代码没有，那是因为沿线的某些东西没有明确设置高度。

Answer 10

有一个基于黄金法则的预制 css 网格系统，并且很容易实现所有类型的列格式。查看960 Grid System。您可以在不使用表格的情况下完成您的目标。通过使用纯 CSS 解决方案，您可以更快地更改布局。

还有一个jQuery fluid implementation 具有您可能感兴趣的流畅布局。

Answer 11

这应该有你需要的一切：

http://maxdesign.com.au/presentation/page_layouts/

还有一个针对所有 CSS 问题的更通用的解决方案：

http://www.blueprintcss.org/

Answer 12

您应该查看 Elastic CSS 框架：

http://elasticss.com/two-columns-based-layout/

干杯。