Jimdo网站二分栏布局等高的几种方法

      对于个人网站,或者是博客,二分栏应该是一种比较理想的布局。主栏是内容区,随页面不同而不同,侧栏则放些共用内容。这种布局的缺点是,两栏的高度不可能完全一样,当有背景色时,总有一栏有空白地带,非常影响美观,而且看上去给人一种不稳定之感。所以两栏某方面的等高,还是比较重要的。

      以本人的博客为例,就存在这种问题,一是侧栏下是空白,二是主栏下是空白,如下图所示。

      在网上搜索并学习了一些二栏等高方面的内容,要么浏览器不兼容,要么就是不是纯CSS的,很难用到这个Jimdo网站上来。下面介绍几种比较不错的方法。

一、侧边框法

      有一种方法,它的思路是:将侧栏放到主栏的边框上,也就是说,将主栏的一个侧边框设为侧栏的宽度,然后再利用 "margin:-值"把空间留给侧栏。

      我现在的模板就是按这个思路来试验的,主栏的CSS代码是:

      #content

{

float:left;

width:XXXpx;
background: #fff;

border-right:YYYpx #F5F8FD solid;

margin-right:-YYYpx;

}

      其中,XXX是主栏宽度,YYY是右边框宽度,也是侧栏宽度,#F5F8FD既是边框颜色,也是侧栏背景色。

      侧栏的CSS代码是:

#right

{

float:right;

width:YYYpx;
background:#F5F8FD;

}

       这种方法的实质,是把侧栏浮动在主栏的右边框上,利用边框背景色,而形成所谓的二栏等高,是简单易行的一种方法,缺点是无法通过边框线实现等高分栏。

二、正内边距加负外边距法

      这个方法的原理是用正内边距来使其中一栏拥有足够高的空间,然后通过负外边距来使其位置不变。通过给父元素溢出隐藏,隐藏掉事先占据的足够高的空间。而由两栏实际的内容高度来决定整个父元素的高度,从而实现了等高。

        CSS代码(假设侧栏使用):

#right

{

float:right;

width:YYYpx;

padding-bottom:10000px; 

margin-bottom:-10000px; 

background:#f0f3f9;

border:#95A8B7 1px solid; 

}

     其中,“padding-bottom:10000px; ”,是正内边距,margin-bottom:-10000px; 是负外边距,“border:#95A8B7 1px solid;” 是分隔用的边框线。10000px这个数值要根据你网站的最多内容而定,数值太小,有些内容就会被隐藏掉了。

      当然,千万不要忘了在父级加上"overflow:hidden"(无引号),否则会显示溢出的内容。

      这种方法的优点也是纯CSS的,而且比较简单,既可以用简单的分隔线,也可以用背景色。这个方法在网络上广为流传,建议感兴趣的朋友试试这种方法。

      当然,这种方法好象也有缺点,有时候有的浏览器打开有些页面,下面会出现很大的空白。还有,不知道是不是个例,用IE6浏览时,当主栏的高度小于侧栏时,也就是主栏内容没有侧栏多时,侧栏的内容会隐藏掉,如下图所示:

三、背景图片法

      这种方法的做法是把主栏和侧栏装到一个<div> </div>里,然后给它设置一个背景图片,在侧栏的位置上,给它做上和侧栏等宽的颜色,然后让它在垂直方向上平铺。这样,这个图片的尺寸也不会太大,有几px就足够了。具体CSS代码可以这样:

background: #XXX url(bg.png) repeat-y;

      其中,#xxx是主栏的背景色。

      这种方法的优点是,不需要设置额外的CSS代码,只要加个背景图片,缺点是需要调整各栏宽度时,需要重新制作背景图片。

Write a comment

Comments: 11
  • #1

    诸葛草帽 (Sunday, 25 July 2010 22:42)

    学习...

  • #2

    网上邻居 (Sunday, 25 July 2010 22:51)

    呵呵,刚写的草稿,还不完善,模板也要慢慢调整。

  • #3

    淘宝600家园 (Monday, 26 July 2010 10:44)

    如果边框线实现等高的二分栏模板的确使内容区分更清晰,好像JIMDO的官方模板有一个是这样的~~~~

  • #4

    淘宝600家园 (Monday, 26 July 2010 10:51)

    呵呵,刚才去看了一下,也不是等高的,也受内容限制。~~~

  • #5

    诸葛草帽 (Monday, 26 July 2010 13:07)

    邻居,我做成了二分栏中间加边框分隔线实现等高了,呵呵,昨天和你的聊天给我的启发

  • #6

    网上邻居 (Monday, 26 July 2010 21:41)

    谢谢二位的留言!
    上面是初稿,我把各种方法又试了试,文章再修改一下,题目也改一下,不是一种方法,而是几种方法。

  • #7

    net123 (Saturday, 31 July 2010 13:30)

    学习了!!

  • #8

    ilisten (Friday, 27 August 2010 13:17)

    学习了,谢谢。

  • #9

    独星 (Saturday, 16 October 2010 11:58)

    是不是在CSS里加了个left就要在HTML里加<div id="left">?

  • #10

    子痕 (Wednesday, 27 November 2013 10:19)

    如果是响应式的话,背景的方法就不好了。

  • #11

    Louis Vuitton iPhone 6 Case (Wednesday, 06 April 2016 17:13)

    The device is more powerful than the iPhone 6s and the iPhone 6s Plus. Yes, the configuration of the device will take your breath away, when you’re using it.