相信明天会更好 » sidebar http://www.sunnyweiwei2008.cn Tomorrow will be better Thu, 25 Feb 2010 08:20:04 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 css来实现sidebar的背景颜色或图片充满网页的整个高度 http://www.sunnyweiwei2008.cn/2008/09/css%e6%9d%a5%e5%ae%9e%e7%8e%b0sidebar%e7%9a%84%e8%83%8c%e6%99%af%e9%a2%9c%e8%89%b2%e6%88%96%e5%9b%be%e7%89%87%e5%85%85%e6%bb%a1%e7%bd%91%e9%a1%b5%e7%9a%84%e6%95%b4%e4%b8%aa%e9%ab%98%e5%ba%a6.html http://www.sunnyweiwei2008.cn/2008/09/css%e6%9d%a5%e5%ae%9e%e7%8e%b0sidebar%e7%9a%84%e8%83%8c%e6%99%af%e9%a2%9c%e8%89%b2%e6%88%96%e5%9b%be%e7%89%87%e5%85%85%e6%bb%a1%e7%bd%91%e9%a1%b5%e7%9a%84%e6%95%b4%e4%b8%aa%e9%ab%98%e5%ba%a6.html#comments Sun, 07 Sep 2008 02:08:09 +0000 sunny http://www.sunnyweiwei.cn/?p=42 平时一般用css的浮动属性来控制sidebar的位置，如果只是用浮动属性的话，那么其背景样色或者图片是随设sidebar的内容多少来填充的，这样势必会造成sidebar内容很少时那么背景颜色也填充很少，这样与主内容不相符，造成布局很难看。这里我们假设HTML中有两个<div>。其中一个是主内容，另一个是右边工具条。工具条浮动到右边，并有一个170px的宽度，由于工具条中的内容较少，他比主文本短。所以我们把那个html包在一个<div>中像这样：

<div id=“wapper”>
<div id=“main”>
main content for page,this column has a lot of text and is much taller than the sidebar.
</div>
<div id=“sidebar”>
sidebar content here
</div>
</div>

这样外层的div增长到与它内部最高元素一样高，因此即使#main div很高，包围的div也一样高，所以我们就可以利用这一点来设计#wrapper div的样式，带有与右边工具条等宽度的背景图片或者颜色，然后垂直平铺，这样就避免了背景图片或者颜色值只充有内容的sidebar。代码如下：

#wrapper
{
background:url(images/1.gif) repeat-y right top;
}

这样设置以后浏览器就会自动的把背景图片显示在sidebar的下方，从而也就创建了带有背景颜色的sidebar

]]> http://www.sunnyweiwei2008.cn/2008/09/css%e6%9d%a5%e5%ae%9e%e7%8e%b0sidebar%e7%9a%84%e8%83%8c%e6%99%af%e9%a2%9c%e8%89%b2%e6%88%96%e5%9b%be%e7%89%87%e5%85%85%e6%bb%a1%e7%bd%91%e9%a1%b5%e7%9a%84%e6%95%b4%e4%b8%aa%e9%ab%98%e5%ba%a6.html/feed 0