技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
DIV+CSS布局中自适应高度的解决方法 左右高度100%
实现原理：
块元素必须包含在一个容器里。
应用overflow: hidden 到容器里的元素。
应用 padding-bottom（足够大的值）到列的块元素 。
应用margin-bottom（足够大的值）到列的块元素。
padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>
<style type="text/css">
body{ margin:0px;}
.sideleft{float:left;width:100px;table-layout: fixed; height:auto; background:#ccc}
.sideright{float:right;width:100px;table-layout: fixed;background:#006699;}
.sideleft,.sideright
{
padding-bottom: 2227px !important;
margin-bottom: -2227px !important;
}
.sideright1 {float:right;width:100px;table-layout: fixed;background:#006699;}
</style>
<div style=" background:url(bg.gif); width:100%;border-bottom:1px solid #000;">
<div style=" background:#ff0000; width:200px; margin:0 auto;overflow: hidden;">
<div class="sideleft">6yang.net</div>
<div class="sideright">6yang.net<span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span><span class="sideright1">6yang.net</span></div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
兼容各浏览器
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;
}
}
/**/