黑暗模式 

2013年10月6日

Css实现两个DIV等高

前面谈到了利用JS让两个DIV等高,但是,有的朋友不想用JS实现,因为觉得JS有缺点的。比如,左右两个层中如果有一个层里的内容加载得慢,那么JS 获取高度大的那个层的高度半天得不到,也无法把参数传递给另一个层。这种情况下,有时还会出现页面不正常。下面这个实例是用CSS来实现两个DIV等高 的。先看一下下面的例子:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>两个DIV等高--HappySea</TITLE>
<style type="text/css">
.main{width:605px;/*父层*/
margin:0 auto;
background:#ccc;
overflow:hidden;}
.left{width:400px;/*左边层*/
height:100%;
float:left;
background:#336633;
margin-bottom:-100000px;
padding-bottom:100000px;}/*内容多时,值大一点*/
.right{width:200px;/*右边层*/
height:100%;
float:right;
background:#ff0000;
margin-bottom:-100000px;
padding-bottom:100000px;}/*内容多时,值大一点*/
</style>
</HEAD>
<BODY>
<div class="main">
<div class="left">这是左边层的内容</div>
<div class="right">这是右边层的内容。对于此例,您可以根据您的要求再做相应的调整。</div>
</div>
</BODY>
</HTML>

说明:如果两个层中某个层的内容很多,那么把margin-bottom与padding-bottom的值赋得稍稍大一点。否则,内容少的那个层将无法与另一个层对齐。

没有评论:

发表评论