DIV+CSS列等高技巧

最新推荐文章于 2023-10-23 11:27:45 发布

hello刘海

最新推荐文章于 2023-10-23 11:27:45 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：网页制作

本文链接：https://blog.youkuaiyun.com/helloliuhai/article/details/14126695

网页制作专栏收录该内容

50 篇文章

订阅专栏

n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，做法有：背景图填充、加JS脚本的方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。

1 背景图填充法
就是将一个npx宽的一张图片在外部容器纵向重复，定位到两列交错的位置纵向重复，在视觉上产生了两列高度一样的错觉
XHTML

<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>

CSS

#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}

2 JS脚本法：
代码的原理基本就是：读取高度，判断高度，高度相等。

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>练习文档01</title>
<style. type="text/css"

</style>
<script>
function SameH(leftDiv,rightDiv)
{
var a=document.getElementByIdx_x(leftDiv);
var b=document.getElementByIdx_x(rightDiv);
document.write(a.clientHeight+'--');
document.write(b.clientHeight+'--');
document.write(a.scrollHeight+'--');
document.write(b.scrollHeight+'--');
if (a.scrollHeight < b.scrollHeight)
{
a.style.height= b.scrollHeight+"px";
}
else
{
b.style.height= a.scrollHeight+"px";
}
}
</script>
</head>
<body>
<div class="Div_top">这是顶部的div</div>
<div id="Div1" class="Div_Left">11111<br>222222<br>33333333<br>444444444<br>555555555</div>
<div id="Div2" class="Div_Right">22222<br>dsaf</div>
<div class="Div_bottom">---------------------------------这是底部的DIV，在左中右中DIV 不等高的情况下会跑上去重叠了<br>----------------------------------------我现在想用一个 JavaScript代码来令左右两半的Div等高<br><br>(注意:中左中右两个DIV的高度是无法事先确定的)</div>
<script>
SameH("Div1","Div2");
</script>
</body>

3 容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法
原作者: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;
}

Opera

1. Opera7.0-7.2不能正确清除溢出部分，所以要加：

#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;
}

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通过。

最终效果:

<!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{
padding: 0;
margin: 0;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 140%;
text-align: center;
background:#E7DFD3;
}
#wrap{
width: 750px;
margin: 0 auto;
overflow: hidden;
}
#header{
background: #E8E8E8;
}
#sideleft{
width: 580px;
float: left;
background: #FFF;
text-align: left;
}
#sideright{
width: 170px;
float: left;
background: #F0F0F0;
text-align: left;
}

#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;
}

#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;
}
}

#footer{
background: #E8E8E8;
width: 100%;
float: left;
}
h1,h2,address,p{
margin: 0;
padding: .8em;
}
h1,h2{font-size: 20px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Head</h1>
</div>
<div id="sideleft">
<h2>sideleft</h2>
<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
<p> 像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。 </p>
<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
<p> 像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。 </p>
<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>

</div>
<div id="sideright">
<h2>sideright</h2>
<p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
<p> 像素是计算机屏幕上的不可缩放的点，而一个
h3 就是一个字大小的方块。由于字体大小的变化， h3
代表用户喜欢的文字大小的相对单位。 </p>
<p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
<p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
</div>
<div id="footer">
<address>
Footer
</address>
<p>制作：<a href=">
</div>
</div>
</body>
</html>