如何在JQuery中设置两个具有相同高度的div

时间:2014-07-13 05:14:48

标签: jquery html css

我正在尝试让我的第二个div在我的第一个div更改时动态更改它的高度,而不是仅使用css更改jquery中的第二个div高度:

这是我的小提琴:     http://jsfiddle.net/692QF/

我的html代码:

<div id='box'>
   <p>This is some text</p>
</div>
<div id='in'></div>

我的css代码:

#box{
background:#0066FF;
border:1px solid blue;
width:250px;
position:absolute;
top:10px;
left:10px;
padding:10px;
}
#in{
display:none;
background:#000;
position:absolute;
z-index:-1;
}
p{
color:white;
}

我的jquery代码:

$('#box').hover(function(){
$('#in').toggle();
$('#in').css({
    'width' : '250px',
    'height' : '60px',
    'border' : '1px solid blue',
    'padding' : '10px'
});
});

2 个答案:

答案 0 :(得分:0)

我创造了这个小提琴,因为你希望这就是你想要的,但我并没有很好地理解你的问题

小提琴:http://jsfiddle.net/692QF/1/

var height = $('#box').height();
var width = $('#box').width();
var border = $('#box').css('border');
var padding = $('#box').css('padding');

$('#box').hover(function(){
    $('#in').toggle();
    $('#in').css({
        'width' : width,
        'height' : height,
        'border' : border,
        'padding' : padding
    });
});

答案 1 :(得分:0)

首先你需要获得第一个div的高度,然后将它分配给第二个div 所以你的jquery

$('#box').hover(function(){
    var hDiv1=$(this).height();
    $('#in').toggle();
    $('#in').height( hDiv1 ).css({
        'width' : '250px',
        'border' : '1px solid blue',
        'padding' : '10px'
    });

});

DEMO