Question

我想知道是否有任何简单的例子可以执行以下操作

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

我尝试了一些方法（例如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

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

为什么呢？它具有互操作性和简单性。它不需要荒谬的CSS黑客，只是几乎没有把东西放在一起（严重的是，花车是用于排版，不是布局）。它在当前使用的每个浏览器中显示相同。它。只是。作品。这是一个语义黑客，但有时你只需要做你必须做的事情。

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

CSS3网格和CSS3模板布局都将正确解决这个问题，但它们仍然有点远离可用。但是，编码员可以做梦吗？

Answer 3

您在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 4

您还可以查看Layout Gala - 40个不同的百分之二和百分之三的列示例以及fizxed大小的列布局。

Answer 5

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

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

对于所有现代浏览器，除IE7外，内容都是纵向和横向居中。 IE7的盒子模型存在问题。我相信IE8已经解决了这个问题。

中心框在IE7中垂直居中，因为我在中心div中嵌套了一个单元格表作为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：网格构建器，并且遇到了一些小问题，但最糟糕的问题是它太复杂了以至于我不知道为什么它不起作用，或者为什么它原本应该做的。

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

Answer 9

在回复原始海报的消息时，以下是我如何使用＆lt; table＆gt;进行第一次请求。（其他都是微不足道的修改）：

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

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

干杯。

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

12 个答案:

CSS

HTML