二
14
2月
2012
用于Jimdo网站的带边框线二分栏等高布局代码
有一段时间没写东西了，模板更是很久没变。最近看一些门户网站，发现它们的主页虽然各异，但是到具体内容页面，基本上都是二分栏结构，不光各个小版块都带边框线，而且做到主、副栏等高。网上邻居对这个很有兴趣，于是这两天在Jimdo网站上做了点测试，将模板改成了现在的样子。
关于二栏等高，从内容层面上说，其实是做不到的，充其量只能做到部分页面等高，因为不同的页面，内容多少是不确定的。布局中的二分栏等高，只是一种假像，它是通过背景色，或边框线来实现二栏等高的。这个问题，网上邻居以前曾经总结过几种方法，见《Jimdo网站二分栏布局等高的几种方法》一文。
上述文中介绍的方法，侧边框法和背景图片法都是背景色的等高法，而正内边距加负外边距法，既可以使用背景色，也可以加边框线法，这个正是网上邻居现在所需要的。不过，当时的代码似乎还有点问题，这里对其作些修正。
所谓“正内边距加负外边距法”，它的原理是，用正内边距来使其中一栏拥有足够高的空间，然后通过负外边距来使其位置不变。通过给父元素溢出隐藏，隐藏掉事先占据的足够高的空间，而由两栏实际的内容高度来决定整个父元素的高度，从而实现等高。
举例来说，假设整个页面，即父元素content宽度为960px，左栏为left 为670px，右栏为right 为280px，中间再留个10px 作为分隔区，则CSS代码可以这样写：
#content{width:960px; overflow: hidden;}
#left{float:left;width:670px; background:#fff;}
#right{float:right; width:280px; margin-left:10px; background:#f00;}
#left, #right{padding-bottom:32768px !important; margin-bottom:-32768px !important;}
这是一种比较理想的用背景色进行二分栏等高的方法，它消除了原文中所说的“主栏内容没有侧栏多时，侧栏的内容会隐藏掉”的问题。它的关键在于，两栏同时使用用正负边距扩充和隐藏空间。
不过，网上邻居要的是边框线而不是背景色，假设边框线的颜色为#cedfff，则CSS代码可以这样写：
#content{width:960px; overflow: hidden;}
#left{float:left;width:668px; background:#fff; border:1px solid #cedfff;}
#right{float:right; width:278px; margin-left:10px; border:1px solid #cedfff;}
#left, #right{padding-bottom:32768px !important; margin-bottom:-32768px !important;}
理论上看这个代码还不错，实现试验，确实实现了想像中的等高效果，但是，左右两栏下面的边框线都被隐藏掉了。作为一种折衷方案，网上邻居采用了下面的代码，即给父元素加个下边框线，所以，大家现在看到的效果，下边框线是相连的。如果哪有朋友有好的解决方案，请给网上邻居留言。
#content{width:960px; overflow: hidden;border-bottom:1px solid #cedfff;}
#left{float:left;width:668px; background:#fff; border:solid #cedfff; border-width:1px 1px 0px 1px}
#right{float:right; width:278px; margin-left:10px; border:solid #cedfff;
border-width:1px 1px 0px 1px}
#left, #right{padding-bottom:32768px !important; margin-bottom:-32768px !important;}
以上代码还不是最终结果，因为网上邻居希望侧栏内容不是一个版块，而是多个，这个比较好解决，我们可以自定义几个div，也可以重复使用它，比如其他版块为side1，包含Jimdo广告盒的为side，并将它放到最下面，以便于在页面上编辑内容。网上邻居这个二分栏模板的最终CSS和HTML代码如下：
部分CSS代码：
#content{float:left;width:960px; overflow: hidden;border-bottom:1px solid #cedfff;}
#left{float:left;width:668px; background:#fff; border:solid #cedfff; border-width:1px 1px 0px 1px}
#right{float:right; width:280px; margin-left:10px;}
.side1{float:right; width:278px; border:1px solid #cedfff;}
#side{float:right; width:278px; border:solid
#cedfff; border-width:1px 1px 0px 1px}
#left, #right,#side{padding-bottom:32768px !important; margin-bottom:-32768px !important;}
部分HTML代码：
<div id="content">
<div id="left">
<var>content</var>
</div>
<div id="right">
<div class="side1">
内容
</div>
<div class="side1">
内容
</div>
<div id="side">
<var>sidebar</var>
</div>
</div>
</div>
评论: 8
-
#1
情人节都不出去混一下，居然独自一人写文章，呵呵...
不管怎么设置，右侧总是有那么多空隙的，我看z-blog里有个什么插件可以在页面浏览到某个位置时，旁边的内容就能固定在一个位置，不知道Jimdo上能不能使用这个效果，如果要使用jQuery那就太浪费了。 -
#2
哈哈，没有情人的情人节，其实也是一种享受...
说到空白，好象这是二分栏布局不可避免的事情。在古老的国画中，“留白”正是笔未到意已至的美妙所在，二分栏背景色或边框线的等高，或许有异曲同工之妙吧。 -
#3
虽然是二栏等高，但用火狐看首页右下的淘宝广告有点遮盖了最近更近下面文章标题的字体~~
-
#4
减少一个最近更新的标题，效果可能更好~~
-
#5
淘宝600家园：
谢谢你反馈的信息和建议！
首页右下角的淘宝广告，只是临时填补那个地方的空白。我是用绝对定位放上去的，它的高度和宽度可以任意设置，我用IE6、IE7、IE8及Google Chrome/10.0.648.134、Firefox/3.6.18等测试都还正常，不知道你用的是什么版本。
另外，这个模板还在调整测试中，特别是首页，还没完全确定下来。
-
#6
我有用的是旧一点的版本，现升级后再看效果不错。
-
#7
淘宝600家园：
看了你上次留言后，我又分析了一下，结论是：
一、我目前的首页内容，除了“最近更新”内容高度不定外，别的版块都是固定高度的。
二、首页右下角的淘宝广告，只是临时填空一下那个地方的空白，因为用的是绝对定位，它脱离了文档流，自己不占空间，而是浮动在别人的空间上，当左栏“最近更新”内容变化时，它的位置肯定会上下变化...暂时调整了它的高度。
三、本文谈到的“下边框线相连”问题，已找到了解决的方法，现在的二栏下面应该是不相连的，找时间写一篇《Jimdo网站带边框线二分栏等高布局终极方案》。 -
#8
呵呵，期待新作~~
打印版本
推荐本站！