CSS布局自适应高度终极方法-css教程-PHP中文网

CSS布局自适应高度终极方法

不言

发布： 2018-05-09 11:33:21

原创

1650人浏览过

这篇文章主要介绍了关于CSS布局自适应高度终极方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

我们排版的最终目的是让程序员能快速绑定，最终的真实数据能和效果图一样，但是我们经常在国字型页面里面碰到左右两列的高度不确定，这样我们必须要把两列的自己适应，请看解决方法

，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

先看代码：

css</a>;toolbar:false">#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: &#39;[DO NOT LEAVE IT IS NOT REAL]&#39;; 
 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: &#39;[DO NOT LEAVE IT IS NOT REAL]&#39;;
 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布局自适应高度终极方法的详细内容，更多请关注php中文网其它相关文章！