맛집 여행 캠핑 일상 생활

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

JAVASCRIPT

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

영은파더♥ 2016. 5. 19. 13:12

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


Trackback : | Comments :