2017-02-08 14 views
1

私はDIVが2つあり、.prev.SLDR-ONEです。.prevと同じ高さをに設定します。DIVの高さを別のDIVの高さに設定する

私は次のことを試してみた:

$(".prev").css({'height':($(".SLDR-ONE").height()+'px')}); 

.SLDR-ONEは高さが定義されていていないので、それが正常に動作していません。 .prevは、高さを.SLDR-ONE(例:300px)と定義する場合を除き、ページの高さをとります。

.SLDR-ONEにはcss:float:left; position:relativeがあるため、高さは自動的に定義されます。

+0

https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect –

+1

これを試すことができますか? 'https:// jsbin.com/roviwi' – plonknimbuzz

+0

@ plonkminbuzz私は試してみたが、なぜ私の高さは本当に等しいわけではない。違いは20〜30pxです – user1708580

答えて

2

.prevの高さを取得するには、innerHeightを使用してください。 jQueryのの.heightから()メソッドとして

0

要素を除くパディング、マージン及びbottom.Soの幅を返しますが、divの

  1. の両方に同じ高さにしたい場合は、(outerHeight使用する必要があります)。 他の要素に同じクラスを割り当てた可能性があり、メソッドがその要素の幅と高さの値を返す可能性があります。
0

あなたはjQueryのを好むならば、あなたはinnerHeightを使用することができoffsetHeight

(function(){ 
 
var one = document.querySelector('.one'); 
 
var two = document.querySelector('.two') 
 
two.style.height = one.offsetHeight + 'px'; \t 
 
}())
.one{ 
 
\t float: left; 
 
\t position: relative; 
 
} 
 
.two{ 
 
\t background: #ccc; 
 
\t clear: both; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="one"> 
 
\t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing </p> 
 
</div> 
 
<div class="two"> 
 
\t 
 
</div> \t 
 
</body> 
 
</html>

を使用してこれを行うことができます。 innerHeightのドキュメント。

関連する問題