网络编程
位置:首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 Chapter 12 CSS布局(7)

[翻译]标记语言和样式手册 Chapter 12 CSS布局(7)

作者:zhaozy 来源:3user.com 发布时间:2008-02-13 14:19:00 

标签:布局,样式,标记,css,手册

页尾问题

以先前的方法浮动分栏时,可以用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 外补丁和主内容相同的页尾

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com