소스자료실

자식이 absolute 일때 부모의 높이값 정하기

by 콘디쌤 posted May 29, 2017
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title>자동 높이</title>
    
<style>

    .pbox {
        position: relative;
        width: 400px;
        min-height: 400px;
        background-color: orange;
    }
    
    .sbox {
        position: absolute;
        top: 100px;
        left: 100px;
        
        width: 300px;
        height: 800px;
        background-color: red;
    }
    
</style>    
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    
$(document).ready(function(){
    
    $(".pbox").height(  parseInt( $(".sbox").css("top") ) + $(".sbox").height()   );
    
    
});    
    
</script>    
 
</head>
<body>
    
    <div class="pbox">
    
        <div class="sbox"></div>
    
    </div>
    
</body>
</html>