等高布局

一、padding&margin的叠加

原理:,使用足够高的padding-bottom  来显示高度的落差部分,设置反向的margin-bottom 来抵消padding给其他元素带来的影响,给左中右设置overflow:hidden隐藏溢出

页面效果，高度随内容而变化 css代码 html代码

如果需要在单列添加一个底边框，需要在第一列里面添加一个空标签，伪装成边框，定位到相应位置，以父元素为定位元素 

     
二、嵌套式等高

使用三个嵌套的元素,通过定位偏移来产生3个背景区域, 在最内层容器中放置3列,通过margin-left 负值显示在背景颜色的区域，页面高度随bg3中的元素高度而变化

html代码 css代码

三个嵌套元素叠加在一起，通过定位偏移将上面两层向右偏移指定数值，bg2和bg3设置的宽度百分百，也就是父级bg1的宽度，偏移后右边部分会发生溢出，在bg1使用overflow：hidden把溢出部分隐藏，bg3中的三个元素向左偏移，使其向左排列成一行，使用margin负值偏移到指定位置，清除bg3浮动，解决高度塌陷，bg3中的元素的高度就是bg3的高度，bg3的高度就是bg2，bg1的高度，bg3中的内容决定页面的高度

三、边框仿背景

          利用边框宽度作为左右两侧的内容区，  浮动之后使用margin值偏移到相应位置

html代码 css代码