基本、可重用、CSS 布局

• 下载源文件 - 1.04 Kb

[注意：有人提醒我，此解决方案在 Opera、Safari 以及其他一些不太主流的浏览器中无法正常工作。最可能的情况是，其中只有修改后的盒模型（IE vs Everyone Else 部分）无法正常工作。您可以通过以标准模式渲染站点，并告诉 IE 也这样做来解决此问题。

就我个人而言，在我的项目中，我从来不需要考虑 IE 和 Firefox 以外的浏览器。我的所有客户都认为，那 2-4% 的非 Firefox 或 IE 用户不在他们的目标受众之列，即使他们在，他们可能也能访问 Firefox 或 IE，并能忍受通过这些浏览器浏览网站的麻烦。（我能听到愤怒的群众挥舞着叉子和火把走来的声音。）

如果您修改了这段代码使其能在任何这些浏览器中运行，请告诉我，我会发布您的修改并给予您应得的荣誉，感谢您花费精力完成这项繁琐的工作。]

引言

我经常发现自己在为各种项目执行相同的布局代码。几乎总是，我试图使用 CSS 渲染的 DIV 来实现一个看起来像这样的站点布局

让此布局在 IE 和 Firefox 中都能正常工作并非易事，而且几乎总是令人头痛。在本文中，我提供了一个基本布局，可以对其进行调整以适应几乎任何项目。

该布局包含几个常见元素：页眉、两个全长列和一个页脚。让此布局正常工作需要解决几个令人沮丧的问题。

基本 Div

第一步是实际创建我们将通过 CSS 操作的 HTML。基本 HTML 如下所示

<div id="Wrapper">
    <div id="Header"></div>
    <div id="Column"></div>
    <div id="Content"></div>
</div>
<div id="Footer"></div>

IE vs 其他浏览器

接下来，我们遇到了 IE 与其他浏览器渲染方式不同的问题。为了解决这个问题，我们在 CSS 样式表中包含以下定义

Div
{
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}

这本质上是告诉 Firefox 以 IE 的方式渲染 <div>，这不符合标准，但对我来说更直观。

最小高度 100%

好的。现在网站的渲染方式符合我的预期。接下来，我们希望网站的主要内容渲染高度为 100% 或更高。为此，我们在 CSS 中添加以下元素

#Wrapper 
{
display: table;
border: solid 3px #4160D5;
margin: auto;
width: 800px;
height: 100%;
padding-bottom: 47px;
}

这里需要注意的是 display:table 和 height:100%。display:table 项告诉 Firefox 将 #Wrapper 元素渲染得就像它在渲染一个表格一样，这意味着它会扩展以适应其子元素。height:100% 指定 #Wrapper 元素至少具有浏览器窗口的完整高度。

相同高度的列

继续前进。事实证明，仅使用 DIV 和 CSS 让列具有相同高度非常困难。有一种称为伪列的解决方案，它涉及使用平铺背景图像来模拟列。我不喜欢这个解决方案。因此，在搜索了很长时间后，我找到了一个更令人满意的解决方案。

我们所做的是，让我们的列变得很大，并告诉它们的包含元素隐藏多余、未使用的列空间。这需要对我们的 CSS 进行几项修改。首先，我们将以下内容添加到我们的 CSS 列项中

padding-bottom: 32767px;
margin-bottom: -32767px;

这通过 padding 将列的底部推得很远，然后通过负 margin 将其拉回来。基本上，这创建了一个很大的列，其中有大量的未使用的空间——浏览器知道这些空间是未使用的。现在，我们将以下内容添加到我们的 CSS 中

html>body #Wrapper {overflow:hidden;}

这基本上告诉 Firefox 容器（#Wrapper）应隐藏其子元素中任何未使用的空间。由于某种原因，如果您在容器上指定 overflow:hidden，IE7 将无法正常工作，因此我们专门为 Firefox 添加了这一行。

那个该死的页脚

最后，我们希望页脚位于页面底部。我们通过以下 CSS 定义来实现这一点

#Footer
{
margin: auto;
background: #D66C43;
margin-top: -50px;
height: 50px;
width: 800px;
border: solid 3px #4160D5;
border-top: 0;
color: #FFF;
}

您会注意到其 margin-top 设置为其高度的负值。没有这一点，页脚就会沉到屏幕底部以下。这将其拉回到适当的位置。我们还希望页脚与我们的主包装元素具有相同的宽度，并具有自动 margin，以便 Firefox 将其居中。

还应该注意的是，页脚现在将挤入我们页面的主内容中。我们不希望这样，所以我们在包装器的底部添加了 padding（如果您滚动回包装器 CSS 代码，您会注意到它已经在那里了）。

呼！

好了，就这些了。您可以下载源代码以获得完整的图像，并开始对其进行修改以使其看起来符合您的要求。我在最新版本的 Firefox 和 IE7 中对其进行了测试。它目前正在我的博客中使用。特别感谢alistapart，这是一个持续有用的网站。我相信他们会不喜欢我的解决方案，但这无关紧要。另外，我想感谢写这篇文章的人。