先看代码:
#wrap{
overflow: hidde
}
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
实现原理:
块元素必须包含在一个容器里。
应用overflow: hidden 到容器里的元素。
应用 padding-bottom(足够大的值)到列的块元素 。
应用margin-bottom(足够大的值)到列的块元素。
padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回到底部开始的位置,同时,溢出部分隐藏掉了。
兼容各浏览器
IE Mac 5
/**/
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/**/
Opera
1. Opera7.0-7.2不能正确清除溢出部分,所以要加:
/* easy clearing */
#wrap:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
di lay: block;
height: 0;
clear: both;
visibility: hidde
}
#wrap
{
di lay: inline-block;
}
/**/
#wrap
{
di lay: block;
}
/* end easy clearing */
/**/
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/10294527/viewspace-122116/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/10294527/viewspace-122116/