WEB 웹팁 디자인팁 폰트 컬러 UI/UX 모바일UI Widget 디자인소스 기획팁 웹서비스 회사복지 스타트업 회사후기 메모/서식 퍼블팁 추천사이트 HTML•CSS 자바스크립트 jQuery React 앵귤러JS Node.js Codepen 개발팁 PHP 한글코딩 인터뷰 안드로이드 오픈API 파이썬 Flutter 서버관리팁

[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>

이온디 유한회사 | 사업자번호 : 405-86-01061 | 통신판매신고 : 제2018-대구동구-0767호 [사업자확인]
주소. 대구광역시 동구 안심로16길 71, 5층 502호 / 전화. 0507-1433-0311

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

주간 인기 검색어 상세보기

2024년 11월 04일 ~ 11월 10일