css兼容所有浏览器(ie6+,现代浏览器)的终极布局方案之 -- 改进版圣杯布局 改进思想:
通过对主内容区main增加一个额外包裹层div,将原来在父节点上的 padding-left|right 设置转移到包裹层上使用 margin-left|right 替代,达到更加灵活的布局设置。
原始圣杯布局实现:
同样的效果:
css 和 dom 代码如下:
改进版圣杯布局 头部
主内容栏自适应宽度
侧边栏固定宽度
主内容栏自适应宽度
侧边栏固定宽度
主内容栏自适应宽度
侧边栏1固定宽度
侧边栏2固定宽度
主内容栏自适应宽度
侧边栏1固定宽度
侧边栏2固定宽度
主内容栏自适应宽度
侧边栏1固定宽度
侧边栏2固定宽度
底部