首页 / CSS / CSS布局自适应高度终极方法
CSS布局自适应高度终极方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS布局自适应高度终极方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1936字，纯文字阅读大概需要3分钟。
内容图文
这篇文章主要介绍了关于CSS布局自适应高度终极方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下我们排版的最终目的是让程序员能快速绑定，最终的真实数据能和效果图一样，但是我们经常在国字型页面里面碰到左右两列的高度不确定，这样我们必须要把两列的自己适应，请看解决方法
，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。
先看代码：
#wrap{
overflow: hidden;
}
#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]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap
{
display: inline-block;
}
/*\*/
#wrap
{
display: block;
}
/* end easy clearing */
/*\*/2. Opera8处理overflow: hidden有个BUG,还得加上以下代码：
/*\*/
#sideleft, #sideright
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sideleft, #sideright
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sideleft:before, #sideright:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/3.Opera9的B2在修正8的bug.
测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通过。
以上就是CSS布局自适应高度终极方法的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的CSS布局自适应高度终极方法全部内容，希望文章能够帮你解决CSS布局自适应高度终极方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。