方法D:定位

<div id="header">
  ...页首内容...
</div>
<div id="content">
  ...主内容...
</div>
<div id="sidebar">
  ...侧边栏...
</div>
<div id="footer">
  ...页脚内容...
</div>

方法D是使用相同的标记源代码结构,然后以最有效率的方式排列<div>:把主内容放在侧边栏之前,关闭样式的浏览器,屏幕阅读器会先收到主内容部分,再收到侧边栏,在定位时,标记源代码内的顺序与页面元素出现的位置没有关系.

能够预测的高度

CSS内容与前三个方法有点类似,第一个差异是对页首指定的像素高度,我们需要能够预测的高度以便稍后为侧边栏定位.

在这里随机选了一个数字,而这需要根据页首使用的内容调整,像是标志,导航栏,搜索表单等.

#header {
  height: 40px;
  background: #ccc;
  }
#footer {
  padding: 20px;
  background: #eee;
  }

为各栏留下空间

接着,要为#content这个<div>设定右外补丁,就像前几个方法一样,这能为右侧边栏留下空间,稍后会使用绝对定位法(不是浮动)把右侧边栏放进去.

#header {
  height: 40px;
  background: #ccc;
  }
#content {
  margin-right: 34%;
  }
#footer {
  padding: 20px;
  background: #eee;
  }

放进侧边栏

最后,要使用绝对定位法把#sidebar这个<div>放到#content的边界里,也必须去掉浏览器在页面周围加上的预设边界,如此一来定位座标在所有浏览器之内就会一致了.

body {
  margin: 0;
  padding: 0;
  }
#header {
  height: 40px;
  background: #ccc;
  }
#content {
  margin-right: 34%;
  }
#sidebar {
  position: absolute;
  top: 40px;
  right: 0;
  width: 30%;
  background: #999;
  }
#footer {
  padding: 20px;
  background: #eee;
  }

在指定position:absolute之后,就能以top与right坐标把#sidebar准确的放到所想的位置(图12-7).

图12-7 以定位做出的两栏布局效果

我们叙述了 "把 #sidebar这个<div>放到距离浏览器视窗上边缘40像素,右边缘0像素的位置",除此之外,也能用bottom和left指定坐标.

页尾问题

以先前的方法浮动分栏时,可以用clear属性确保页尾横跨整个浏览器视窗的宽度,而不受主内容,侧边栏的长度影响.

在定位时,侧边栏的文档流独立于整个页面之外,所以只要侧边栏比内容还长,它就会盖住页尾部分.(图12-8)

图12-8 侧边栏与页尾重叠

面对这个问题我常用的解决方法之一,是为页尾指定与主内容一样的右外补丁,让侧边栏能够延伸超过页尾.

使用这个方法的话,CSS需要调整成这样:

body {
  margin: 0;
  padding: 0;
  }
#header {
  height: 40px;
  background: #ccc;
  }
#content {
  margin-right: 34%;
  }
#sidebar {
  position: absolute;
  top: 40px;
  right: 0;
  width: 30%;
  background: #999;
  }
#footer {
  margin-right: 34%;
  padding: 20px;
  background: #eee;
  }

这个解决方案在内容很短,侧边栏很长的页面上看起来有点怪,但是它的确有效,结果可参照图12-9,示范了侧边栏避开页尾的情况.

图12-9 外补丁和主内容相同的页尾

除了使用float属性之外,也能用定位制造出分栏布局,让我们看看最后一个选择,方法D.

出处：蓝色理想
责任编辑：bluehearts

上一页 标记语言——CSS布局 [4] 下一页 标记语言——CSS布局 [6]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。