再次折腾主题

2008

11-27

再次折腾主题

16:58 | 分类目录：孜孜以求 | 访问 (49) | 评论 (8)

一直以来有一个问题困扰着我，我以前的博客布局是这样的：

<div id="wrapper">
	<div id="content">页面主体</div>
	<div id="sidebar">侧栏</div>
</div>

问题在哪儿呢？就是两边的高度不相等的时候，侧栏和内容之间的分割线如何添加。一般情况下侧栏比文章长，所以我开始是把侧栏的左边框作为两栏的分割线：

#sidebar{
	border-left:1px dashed #99ccff;
}

但如果文章很长，文章栏目的长度超过侧栏长度，这根线就不能到达页面底部了。反之亦然，加在内容栏目的右边框上也有同样的问题。如果直接给总容器#wrapper加背景，在Firefox下不能正常显示。所以我一直整个页面用白色背景来凑和。
昨天无意间打开以前在yo2的博客，发现采用的是dupola的Apple Theme，这个主题很好的解决了我刚才提到的问题，于是查看了一下他的源文件。原来，一切是那样的简单。
布局的改变只要在#wrapper容器内再添加一个子容器，比如#inner，来将两个垂直的栏目包裹起来，然后将两个垂直的栏目上下分别加上一些其他内容，#inner子容器区域就可以设置背景了。如图所示。
不知这样做是不是违反了dupola的创作共用协议。另外，这一次更改还启用了向往已久但一直懒得去下载安装的Pagenavi插件。

才( 8 )条评论

Comment by dupola
2008-11-27 21:45

哈哈，没有，弄出来就是大伙儿一起玩儿嘛。。。
mercy:借用了你的layout.css的一些东西，呵呵。

Comment by bigCat
2008-11-28 01:02

雷,看了两遍终于明白什么问题了
就是清除浮动嘛..
因为子元素全部float了,所以导致父元素高度为0,你设置背景也看不到
清楚浮动的话你目前的方法是在最后加空标签(前面的其实可以不用加)
还有个简单的方法就是给wrapper_inner增加
height:1% (这个是ie激发hasLayout)
overflow:hidden (这个是firefox下清浮动)
然后,可以删除那俩空标签了…
mercy:真懂和装懂就是不一样，大猫一下就说出了问题的本质，因为子元素全部float了,所以导致父元素高度为0，知道了问题真正所在，解决的方法就容易找到了。看来我对CSS的了解还仅仅是略知皮毛这么肤浅啊。谢谢大猫的精彩解说。