我们为大家收集整理了关于divcss网页一行两列背景自适应，以方便大家参考。网页布局中常有的一种情况就是网页主体部分分成一行两列;而在很多种情况下，设计师们常把左右两列的背景色设计成不同色彩，以实现内容块的明显区分;但这样的设计给布局提出了一个看似简单，而实现非常难的问题;那就是左右两列怎么样实现背景高度自适应，及左边内容高于右边时，右边背景色也要和左边一样;右边内容高于左边时，左边背景色也要和右边一样;

基本原则：

1、布局要合理，不能为了实现这样的效果而使html的代码变得臃肿;

2、CSS部分也要简单巧妙实现，不能为了这样的效果而写大量的代码;而主要的还是浏览器兼容方面要没有问题;

以下是我实现的代码，说明一下，这样的布局还不是很理想;但这已是我暂时能想到的最好解决办法了;

<style>
/*这一行可能不用看，是废话，为了好看一点*/
*{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Verdana;}
/*最外边的一个盒子，左边框200PX，有背景色*/
#box{ background:#FFCC00;width:700px; border-left:200px solid #FF9900;}
/*让左边的一列向左移动200PX*/
#left{margin-left:-200px; width:200px; position:static;}
/*由于IE和FIREFOX有区别，所以对IE加了一行作处理*/
* html #left{position:fixed;}
/*右边的宽度，这里我为什么没有写700PX；说实话，我实在没有想明白；这里最多只能写900-200-2=698PX；但这在使用过程中，并不会有影响；*/
#right{float:right; width:695px;}
</style>

希望大家可以学会divcss网页一行两列背景自适应想了解更多精彩内容，请关注我们的网站!

相关推荐：

divcss技巧介绍