Question

怎么用CSS+DIV样式同步左右两个DIV的高度？

Answer 1

LZ 我知道你想干甚麼… 那个在 CSS 是做不到的
必须有 JS 帮助，我平常都自己写 function，下面给你一个 eqHeight() 的 JQuery 函数给你用呗

先你把两个浮动的 div 加上同一个 class

<div class="floating" id="left">...</div>
<div class="floating" id="right">...</div>

$(document).ready(function() {
$.fn.eqHeight = function(minH, maxH) {
var tallest = minH || 0;
this.each(function() {
if ($(this).height() > tallest) {
tallest = $(this).height();
}
});
if ((maxH) && tallest > maxH) tallest = maxH;
return this.each(function() {
$(this).height(tallest);
});
});

$('.floating').eqHeight(); // 这句就是呼唤 eqHeight 函数，把你两个 <div> 弄到同一最高度
});​

追问

我最晕js了 不用不行么

追答

整个功能都写给你了, 你就只需要把 floating 的 class 加进去你两个 而已啊

* 你猜对… 不用不行，最高高度跟内容自适应只可以用 JS 实现嘛

如果按一楼的 CSS 方法只可以做到背景色占满高度而已
效果如下

我是文字 我是文字 我是文字 我是文字

我是文字 我是文字 我是文字 我是文字

我是文字 我是文字 我是文字 我是文字

我是文字 我是文字 我是文字 我是文字

我是文字 我是文字 我是文字 我是文字

我是文字 我是文字 我是文字 我是文字
​

.main {overflow:hidden;width:460px;}
.main .padding {
padding: 10px;
margin: 10px;
border:#c00 1px solid;
}
.main > div {
padding-bottom:1000em;margin-bottom:-1000em;
background: #eee;
}
.left {display:inline-block;width:200px;overflow:hidden;float:left;}
.right {display:inline-block;width:200px;overflow:hidden;float:right;}
.main .clear {clear:both}
​

追问

好吧 我试试

Answer 2

需要在外部加个div，然后设置宽、溢出隐藏，不设置高；

里面的2个div除浮动、宽外同时加上padding-bottom:2000px;margin-bottom:-2000px;overflow:hidden就可以了

当然2000这个数值你可以改大或小，具体效果自己测试下就ok了

追问

这个不行 我要的是右边的内容不隐藏
开始有一个高度 如果右边的内容多了就挤出来
左边就和右边一起动 能实现么

追答

我没说右边的隐藏啊~~

main就是我说的外部的div，
你是想让2个层的背景一样高？按我说的设置就可以了

追问

背景一样高？还不是div一样高么

追答

那就可以实现，这个效果做了N遍了，三栏、四栏都一样的方法实现~

追问

好吧 我试试

追答

.main {width:1000px;overflow:hidden}
.left {width:200px;padding-bottom:2000px;margin-bottom:-2000px;overflow:hidden;float:left}
.right {width:200px;padding-bottom:2000px;margin-bottom:-2000px;overflow:hidden;float:right}
.clear {clear:both}

Answer 3

就是2个div一样高吗? 没其他的要求了? 在CSS中 写入.div1,.div2{height:XX px;} <------XX为你要的DIV的高度~ 2个DIV一样的！

追问

这样普通的方法是不行的 我试过

追答

不明白你的意思？同步高度2个DIV 如果是这样的话是绝对行的

Answer 4

1. 设置一个class样式
   

2. 将这两个div的class都设置为上述样式。
   

Answer 5

不考虑IE6的情况下 用min-height:？px; IE6不支持这个

追问

那不行 测试都要用很多浏览器