Question

DIV+CSS 如何让左右两个DIV的高度一致？

我的DIV+CSS布局是#header,#pagebody,#footer,其中#pagebody分成#sidebar和#mainbody，#sidebar是导航栏，可以展开、收缩的那种，#mainbody是主内容，因为各个内容不一样所以高度不固定，#sidebar有个底色，但是底色却不能显示，除了有内容的部分外其它区域是空白，是不是因为#sidebar的高度与#mainbody的高度不一致而导致的这种结果，请各位帮帮忙，谢谢！

Answer 1

最经典的两列自适应高度CSS代码，IE5、6、7，FF下测试通过。希望对你有用： body{ padding: 0; margin: 0; color:#333/*#0d7206*/; font-size: 14.7px; font-family: Arial, Helvetica, sans-serif; line-height: 140%; text-align: center; background:url(body_bg.jpg) #c8fdcc repeat-x top left; } #pagebody{ width: 760px; margin:10px auto; overflow: hidden; } #sidebar{ border-right:1px #009900 dotted; width: 199px; float: left; background:url(l_bg_contbox.png) #FFF repeat-y left; text-align: left; } #mainbody{ width: 560px; float: left; background:url(r_bg_contbox.png) /*#f6f6f6*/#fff repeat-y right; text-align: left; } /* easy clearing */ #pagebody:after { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0; clear: both; visibility: hidden; } #pagebody { display: inline-block; } /*\*/ #pagebody { display: block; } /* end easy clearing */ /*\*/ #sidebar, #mainbody { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } @media all and (min-width: 0px) { #sidebar, #mainbody { padding-bottom: 0 !important; margin-bottom: 0 !important; } #sidebar:before, #mainbody:before { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; background: inherit; padding-top: 32767px !important; margin-bottom: -32767px !important; height: 0; } } /**/

Answer 2

你的div里面的高度，写成相同的值就可以了，你要display inline block 转成并排的，你在再试试看吧。

Answer 3

如果用纯css实现起来还有点麻烦，实际上是我自己写不出来，因为写出来他的顶部是对齐了的，没瀑布流的感觉
推荐lz使用js插件实现
在网上搜下jquery.masonry这个jquery插件，是专门给瀑布流写的，引用其库和css代码就搞定了，是你想要的那种效果