[javascript] CSS와 자바스크립트를 이용하여 DIV 높이 height:100% 채우기

2015년 08월 20일
※ 출처 : http://1004lucifer.blogspot.kr/2014/04/css-div-width-height.html

출처는 위 url 입니다.
이 방법은 자바스크립트와 CSS를 이용하여 div 높이를 100% 만드는 것입니다.
간단하게 CSS로는 {position:fixed;height:100%;top:0;left:0} 이런 식으로도 가능합니다.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #wrapperDiv {
            width: 100%;
            height: 200px;
            background-color: #C8BEB7;
        }
        #div1 {
            display: inline-block;
            width: 200px;
            height: 100%;
            background-color: #747474;
        }
        #div2 {
            display: inline-block;
            width: 500px;
            height: 100%;
            background-color: goldenrod;
        }
    </style>
    <script type="text/javascript">
        function div2Resize() {
            var div2 = document.getElementById('div2');
            div2.style.width = window.innerWidth - 200 + 'px';
        }
        window.onload = function() {
            div2Resize();
 
            // 브라우저 크기가 변할 시 동적으로 사이즈를 조절해야 하는경우
            window.addEventListener('resize', div2Resize);
        }
    </script>
</head>
<body>
<div id="wrapperDiv">
    <div id="div1">div1</div><!--
    --><div id="div2">div2</div>
</div>
</body>
</html>
홈페이지 제작팁

[javascript] CSS와 자바스크립트를 이용하여 DIV 높이 height:100% 채우기

Login
