放进侧边栏

最后,要使用绝对定位法把#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.

三人行

如果想做三栏布局的话该怎么办?没问题,而且在使用绝对定位时很容易加入.只需要为主内容,也为加上左外补丁,大小足够容纳第三栏即可.

另一个侧边栏能够放在标记源代码之内任何地方,因为会需要再度使用绝对定位进行布局.

假设加了第二个侧栏,并将它取名# sidecolumn,接着以下面这段CSS为它空出位置,再把它放进去.

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