一、padding&margin的叠加
原理:,使用足够高的padding-bottom 来显示高度的落差部分,设置反向的margin-bottom 来抵消padding给其他元素带来的影响,给左中右设置overflow:hidden隐藏溢出
如果需要在单列添加一个底边框,需要在第一列里面添加一个空标签,伪装成边框,定位到相应位置,以父元素为定位元素
二、嵌套式等高
使用三个嵌套的元素,通过定位偏移来产生3个背景区域, 在最内层容器中放置3列,通过margin-left 负值显示在背景颜色的区域,页面高度随bg3中的元素高度而变化
三个嵌套元素叠加在一起,通过定位偏移将上面两层向右偏移指定数值,bg2和bg3设置的宽度百分百,也就是父级bg1的宽度,偏移后右边部分会发生溢出,在bg1使用overflow:hidden把溢出部分隐藏,bg3中的三个元素向左偏移,使其向左排列成一行,使用margin负值偏移到指定位置,清除bg3浮动,解决高度塌陷,bg3中的元素的高度就是bg3的高度,bg3的高度就是bg2,bg1的高度,bg3中的内容决定页面的高度
三、边框仿背景
利用边框宽度作为左右两侧的内容区, 浮动之后使用margin值偏移到相应位置