怎么用CSS+DIV样式同步左右两个DIV的高度？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么用CSS+DIV样式同步左右两个DIV的高度？相关的知识，希望对你有一定的参考价值。
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
好吧 我试试
参考技术A 需要在外部加个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
这样普通的方法是不行的 我试过
追答不明白你的意思？同步高度2个DIV 如果是这样的话是绝对行的
参考技术C设置一个class样式
将这两个div的class都设置为上述样式。
那不行 测试都要用很多浏览器
本回答被提问者采纳纯div css实现的左右两个等高div
工作当中我们经常会有这样的需求，尤其是在一些内容页面或者网站后台管理页面：左边的div的高度会随着右边的div的内容的增加儿增加，右边div的高度也会随着左边div的内容的增加而增加，也就是左右两侧两个等高的div。如果不借助JS，而时淡出的使用div+css的方法该怎么实现呢？见代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>div+css实现的左右两个等高div</title> <style> *{ margin: 0; paddig: 0; } .wrap{ width: 700px; overflow:hidden; margin: 0 auto; } .left,.right{ margin-bottom: -100000px;/*数值随便设置,越大越好,也就是(-padding-bottom值)*/ padding-bottom: 100000px;/*数值随便设置,越大越好*/ } .left{ width: 300px; float: left; background: yellow; } .right{ width: 400px; float: right; background: green; } </style> </head> <body> <div class="wrap"> <div class="left"> left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>end</p> </div> <div class="right"> <p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p> <p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p> <p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p> <p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p> <p>left</p><p> <p>right</p><p>right</p><p>right</p> <p>end</p> </div> </div> </body> </html>
以上是关于怎么用CSS+DIV样式同步左右两个DIV的高度？的主要内容，如果未能解决你的问题，请参考以下文章