DIV height:auto 인 경우 높이 구하기

DIV height:auto 인 경우 높이 구하기

아래 예제 처럼 div 안에 div 가 float 인 경우는 jQuery 로 높이값이 0이 나온다.

이런 경우에는 1stDIV, 2ndDIV offset().top 차이로 높이값을 구할 수가 있다.

그리고 height 가 auto 인 경우에는 background-image:url 도 먹히지 않는다.

높이 값을 구해서 height 에 값을 설정해야만 백그라운드 이미지가 나온다.

<div id="1stDIV" style="width:808px;height:auto;border:1px dotted blue;">

<div style="float:left;width:190px;height:100px;border:1px solid red;margin:5px;">div 1</div>

<div style="float:left;width:190px;height:100px;border:1px solid red;margin:5px;">div 2</div>

<div style="float:left;width:190px;height:100px;border:1px solid red;margin:5px;">div 3</div>

<div style="float:left;width:190px;height:100px;border:1px solid red;margin:5px;">div 4</div>

<div style="float:left;width:190px;height:100px;border:1px solid red;margin:5px;">div 5</div>

<div style="float:left;width:190px;height:100px;border:1px solid red;margin:5px;">div 6</div>

<div style="float:left;width:190px;height:100px;border:1px solid red;margin:5px;">div 7</div>

<div style="float:left;width:190px;height:100px;border:1px solid red;margin:5px;">div 8</div>

</div>

<div id="2ndDIV" style="width:100%;height:0px;overflow:hidden;"></div>

<script>

$(document).ready(function(){

var h = $('#2ndDIV').offset().top - $('#1stDIV').offset().top ;

$('#1stDIV').height(h);

});

</script>

dd

div 1

div 2

div 3

div 4

div 5

div 6

div 7

div 8