怎么用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}

追问

好吧 我试试

温馨提示:内容为网友见解,仅供参考
第1个回答  2012-04-25
需要在外部加个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个回答  2012-04-25
就是2个div一样高吗? 没其他的要求了? 在CSS中 写入.div1,.div2{height:XX px;} <------XX为你要的DIV的高度~ 2个DIV一样的!追问

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

追答

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

第3个回答  2015-09-12

    设置一个class样式

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

第4个回答  2012-04-25
不考虑IE6的情况下 用min-height:?px; IE6不支持这个追问

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

本回答被提问者采纳

CSS+DIV怎么实现网页左右两栏高度一致?
可以通过JQ来获取右边高度再付值给左边。这样,右边内容再多,JQ也能把它的高度付值给左边,这样就会两边一样。<script type="text\/javascript" src="jquery-1.8.2.min.js"><\/script><script type="text\/javascript">\/\/判断控制页面初始时左右的高度一致 var hl = $(".left").outerHeight(...

css+div布局,左右两个div怎么能自动适应高度
可以通过js实现两个div自适应同等高度,如下:先设置div+css 基本布局:<div id="mm"> <div id="mm1">左边<\/div> <div id="mm2">右边<\/div> <\/div> js 实现 div 自适应高度 代码如下:<script type="text\/javascript"> <!-- window.onload=window.onresize=funct { if document.getElem...

如何用CSS+DIV写两个并列并且左边宽高固定,右边宽高自适应屏幕的层?
<div class="wrap"> <div class="main"> <div class="main-inner"> test <\/div> <\/div> <div class="fixed">a<\/div> <\/div> <\/body> <\/html> --- html和body的高度设置为100%, 这样才能让div#wrap的高度生效.若要将左侧高度固定,将.fixed的height设置为固定值就行了.

div+css如何左对齐?
1、div左对齐条件与方法只需要对要靠左对齐(局左)的div样式加float:left即可,这里新建一个html文件,创建一个div容器并给它一个class属性,容器里面是两个div,一个靠左对齐,一个靠右,以示区别:2、接下来设置css样式,在style标签中,设置div的float值为left,就实现左对齐了,最后在给div高度,...

DIV+cSS同一行左右对齐
文字左右对其,同一行,表格两列是最好的,分别用align left right实现,当然也可以用两个div一个左浮动,一个右浮动,并且分别设置text-align属性就可以了,浮动元素不要设置padding和margin属性,否则会浮动边距加倍错误。我说的是DIV的高度自适应父容器的高度,不知道你说的页面自适应高度怎么理解,如果...

css怎么使一个div的高随另一个div的高的变化而变化,还有就是怎么使第...
右边的div高度你可以用一点js和jquery来控制,比如你用$("#divLeft").css("height")来获取左边的高度,然后把这个值设给右边就可以实现实时变化了,因为我知道你这个forum的话是左边可能变化比较大,然后右边要随着左边的变化来适应,当然float也要设置为left;(此处要保证你的左div和右div的宽度之和...

css实现:左右两个div高度相同(右边div在js加载内容后高度会变化)
<div class="col"> <p>右侧内容<\/p><p>右侧内容<\/p> <\/div> <\/div> 样式 <style> .flex-box { display: -webkit-flex;display: -ms-flexbox;display: flex;overflow: hidden;color:white;} .flex-box>.col{ flex: 1;padding: 20px;} .flex-box>.col:first-child { background:...

css怎么自动调整div的位置和大小
1、先新建一个html文件,并在head中添加样式表【styletype="text\/css">\/style>】。2、在body中添加一个DIV,并引入一个CSS,命名为【aaa】。3、给这个DIV添加背景色,并定义它的宽和高。【background:#FA2;width:400px;height:600px;】。4、然后添加如下代码。【position:fixed;left:50%;top:...

怎么才能让左边的div的高度随着右边div的高度变变化而变化,用css写
<style type="text\/css"> <\/style> <\/head> <body> <div id="div1" style="width:300;height:auto;border-style: solid;float:left;padding:5"> <div id="div2" style="width:100;float:left;border-style: solid;"> 左边~~~<\/div> <div id="div3" style="width:180;height:aut...

DIV+CSS布局问题,让两个DIV标签并排
1、使用css float并排显示:对div设置一个float浮动属性即可解决不并排显示,只要并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。加float浮动实现多个div并排显示。这里对div通设一个浮动,当然实际使用时候,要通排显示div对象的加入css类,就对要同行显示css选择器设置浮动。避免其它...

相似回答