前端开发者学堂 - fedev.cn

Web布局连载——两栏固定布局（二）

#HTML#Layout
发布于 大漠

在《Web布局连载——两栏固定布局（一）》中，使用了两种不同的结构，配合不同的CSS浮动方法，实两了两种最为常见和最基础的两栏固定布局效果：侧栏在左边，主内容在右边（demo1,demo3），主内容在左边，侧栏在右边（demo2,demo4）。但有时候这种结构的布局并不能满足我们的需要，比如说页面的（header）部分，背景色占满了整个浏览器的宽度，那么在前面那篇文章中的布局就无法使用，因为其里面有一个“div.wrapper”将整个页面受限于一定宽度之下。那么要实现页面部分背景全屏，或者说部分内容全屏，而其他内容居中的效果，我们应该怎么做呢？这就是我今天要给大家介绍的两栏固定布局中的第二种方法，当然这种方法有很多同学在使用，但有些刚学习布局的同学还是值得一看的。

刚才说了，由于结构的受限，所以要实现类似下图效果是行不同的，所以我们有必要先重构一个适合这种布局结构的HTML。

边栏在右，主内容在左

制作类似上图的效果，我们把结构重新重构一回。

HTML结构

<div id="header">
    <div class="container">
        <h1>Header content</h1>
        <p>W3cplus Layout Template ➽ Fixed Width Layout ➽ Two Columns Layout </p>
    </div>
</div>
<div id="page">
    <div class="container">
        <div class="main-content">
            <h2>Main Content</h2>
        </div>
        <div class="aside sidebar">
            <h2>Sidebar Content</h2>
        </div>
    </div>
</div>
<div id="footer">
    <div class="container">
        <h2>Footer Content</h2>
    </div>
</div>

简单的说明一下这个结构的用意

  1. 页面每个部分都有一个自身的大容器，比如说“div#header”、“div#page”、“div#footer”；实际项目中可以根据自身的需求添加或删除，这个大容器主要作用就是用来控制部分元素全屏效果；
  2. “div.container”分别放置在每个大容器里面，其作用类似于前面教程中的“div.wrapper”容器，你可以在这个容器中设置宽度，用来实现水平居中的效果；
  3. “div.sidebar”和“div.main-content”主要是边栏和主内容，这两部分和前面介绍的一样，你可以考虑其在文档流中的加载顺序，上面的结构是先加载了“div.main-content”，然后在加载的“div.sidebar”

结构其实并不复杂，与前一教程的结构相比，这个结构略显复杂一点，每个部位都是包含了一个容器“div.container”。此时大家会问，为什么要在每个部分添加一个这样的容器，难道不能像前面的布局（一）中所言，一个就行吗？其实要实现上面效果，前面的结构是不满足我们的需求了，为他使部分背景或背景图全屏（或者说部分内容全屏）显示，那么我们就有必要单独控制部分内容，让他的宽度是100%。比如说我头部的内容不想居中，那么我们就可以使用

#header .container {
  width: 100%;
}

来重置

.container {
  width: 960px;
}

让header部分全屏显示。当然大家可以根据需要按类似的方法来实现同样的效果。接下来，我们一起来看两种效果。

1、头部和脚部全屏背景，并且内容居中，同时主内容居中，侧栏居左

今天要实现的第一个效果就是，“header”和"footer"有一个全屏的背景颜色，而其内容依然居中显示，同时“div#page”中的主内容居右显示，侧栏居左。效果如下面的DEMO所示：

边栏在左，主内容在右

CSS代码

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Amarante', cursive;
  background: url(https://static.fedev.cn/sites/default/files/bg_body.png) repeat;
  text-align: center; /*IE6下让元素居中*/
}

/*===================================================*\
 *                                                   *
 *   Layout                                          *
 *  .container宽度=.sidebar宽度+间距+.main-content宽度 *
 *                                                   *
\*===================================================*/
/*清除浮动*/
.container:after,
.container:before {
  content: "";
  display: table;
}

.container:after {
  clear: both;
  overflow: hidden;
}
.container {
  width: 960px; /*页面总宽度*/
  margin: 0 auto; /*水平居中*/
  text-align: left; /*重置文本对齐方式*/
  zoom: 1;
}

#header {
  background: #b1b1b1;/*header全屏背景色设置*/
  color: #fff;
  margin-bottom: 15px; /*顶部与主内容垂直间距，可自行修改*/
}

.sidebar {
  width: 220px; /*左边栏宽度，可自行修改*/
  float: left;/*侧栏居左*/
}

.main-content {
  width: 720px; /*主内容宽度*/
  float: right;/*主内容居右*/
}

#footer {
  background: #b1b1b1;/*footer全屏背景色设置*/
  color: #fff;
}

/*测试样式，可自行修改*/
#header .container {
  height: 75px;
}

.sidebar {
  height: 350px;
  background-color: #E7DBD5;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}

.main-content {
  background-color: #F2F2E6;
  height: 350px;
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}

#footer .container {
  margin-top: 15px;
}

上面样式代码中有两个关键地方，第一是在“div.container”中进行清浮动，因为在“div#page”内左边栏和主内都进行了浮动布局，所以有必要清除浮动，当然大家可以在“div.container”中多添加一个类名“clearfix”来清除浮动；第二点就是“div.container”的宽度应该等于“div.sidebar”宽度、“div.main-content”以及这两者之间的间距之和。这一点和前面的“wrapper”宽度是一样的。

接下来我们来看第二种情况，就是主内容居左，侧栏居右。这种效果，实现结构和前面结构一致，只是稍微改变一下侧栏和主内容的浮动方向，其效果如下面的DEMO所示：

边栏在右，主内容在左

改变后有样式代码

.sidebar {
   width: 220px; /*左边栏宽度，可自行修改*/
   float: right;/*侧栏居右*/
}

.main-content {
  width: 720px; /*主内容宽度*/
  float: left;/*主内容居左*/
}

通过改变他们的浮动方向，达到两栏布局位置的调换。

正如前面所言，如果你的效果有一部分是内容也全屏显示，那么我们可以通过其父容器与“div.container”的配合，来重新设置“div.container”的宽度，此时“div.container”的宽度不在是两栏宽度与间距之和，应该是“100%”。比如说，你的页面顶部有一个工具导航栏：

#headerbar .container {
  width: 100%;
}

实现效果就是这么简单，大家感兴趣的话不仿一试效果。

那么到这就介绍完了两栏固定布局的第二种方法，两种方法相比，各有利弊。前一种方法结构简单，易于理解，但受限太多，扩展性差；而今天介绍的方法结构复杂一顶点，部分同学可能会难以理解，但其扩展性强。至于何时使用哪种布局，其实不用我说，大家看DEMO就一目了然。不过我自己更趋于使用今天介绍的方法。

今天就说到这里了，下一期将为大家介绍两栏固定布局中的第三种方法，使用浮动配合负的margin来实现。这种方法相对这两种方法来说，难度稍为大一点，不过也不会非常复杂。有兴趣的同学，敬请观注本站的相关更新。

上一节：《Web布局连载——两栏固定布局（一）》

下一节：《Web布局连载——两栏固定布局（三）》

如需转载，烦请注明出处：https://www.fedev.cn/css/layout/fixed-layout/two-columns-2.html

Nike Zoom Vomero 13