CSS布局自适应高度解决方法

2020-03-24 18:07:57

字体：大中小

来源：转载

供稿：网友

原作者:Alex Robinson
原文标题:Equal Height Columns这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加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;
}
/**/Opera1. 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通过。最终效果:运行代码框

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 原文：http://www.positioniseverything.net/articles/onetruelayout/equalheight 本文作者:html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：用CSS打造可折叠伸缩名片菜单

下一篇：利用CSS改善网站可访问性