jQuery resize()를 사용하여 컨텐츠 영역 height를 100%로 유지하기

jQuery의 resize() 함수를 사용하여 헤더, 메뉴, 컨텐츠 영역으로 구성되는 화면에서 컨텐츠 영역의 높이는 브라우저의 크기를 조절 하더라도 항상 100% 가 유지 되고, 컨텐츠 영역 내부의 실제 컨텐츠의 높이가 컨텐츠 영역의 높이보다 크다면 스크롤이 생기도록 만들어 봅니다.

 

 

 

먼저 html 부분 입니다. head와 main이 상하로 나뉘고, main 내부에는 menu와 contents 가 좌,우로 나뉘어져 있습니다.

 

<div id="head">HEADER</div>

<div id="main">
    <div id="menu">MENU</div>
    <div id="contents">CONTENTS<br/>Lorem ipsum ...</div>
</div>

 

스타일 시트 부분 입니다. html, body, div 부분은 엘리먼트들의 크기를 초기화 하는 부분 입니다. #main 은 flexbox 레이아웃을 사용해서 구성 했습니다. #contents 가 컨텐츠 영역으로  overflow:auto; 로 지정해서 내부 컨텐츠가 스크롤 되도록 하였습니다.

 

<style>
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow:hidden;
}

div {
    margin: 0;
    padding: 0;
}

#head {
   height: 50px;
   outline:solid 1px red;
}

#main {
    display:flex;
    outline: solid 1px red;
}

#menu{
    flex-basis: 200px;
    flex-shrink: 0;
    overflow: auto;
    outline: solid 1px blue;
}

#contents {
    overflow:auto;
}
</style>

 

자바스크립트 부분입니다. jQuery의 resize() 함수를 사용해서 브라우저의 사이즈가 변할때 마다 필요한 엘리먼트의 크기를 조정합니다.

 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){

    // resize 이벤트가 발생할때마다 사이즈를 조절합니다.
    $(window).resize(resizeContents);

    // 처음 페이지가 뜰때 사이즈 조정 부분 입니다.
    resizeContents();

});

// 메뉴와 컨텐츠의 높이를 윈도우 높이에서 헤더 부분을 뺀 크기로 지정합니다.
function resizeContents() {
    $("#menu").height($(window).height()-50);
    $("#contents").height($(window).height()-50);
}
</script>

 

화면 크기를 조절할때 리사이즈 이벤트가 많이 발생하게 됩니다. 항상 이 이벤트를 처리하는 것이 아니라 특정 시간 간격으로 건너 뛰면서 이벤트를 처리하여 부하를 줄이는 방법 입니다.

 

<script>
$(document).ready(function(){
    $(window).resize(throttle(100, function(e) {
        resizeContents();
    }));
    resizeContents();
});

function resizeContents() {
    $("#menu").height($(window).height()-50);
    $("#contents").height($(window).height()-50);
}

// 주어진 시간만큼 지나야 주어진 함수를 실행 합니다.
function throttle(ms, fn) {
    var allow = true;
    
    function enable() {
        allow = true;
    }
    
    return function(e) {
        if(allow) {
            allow = false;
            setTimeout(enable, ms);
            fn.call(this, e);
        }
    }
}
</script>

 

이벤트 함수를 처리하고 allow 플래스를 설정해 둡니다. 이 플래그는 setTimeout() 으로 주어진 시간이 지난 후에 풀려서 다시 이벤트를 처리합니다. 그 시간안에는 이벤트가 발생하더라도 처리 함수가 호출 되지 않도록 해줍니다.

 

※ 댓글에 3단 레이아웃을 요청하신분이 있어 만들어 보았습니다. 브라우저 리사이즈시 헤더, 메뉴, 푸터는 항상 나오고, 가운데 컨텐츠 부분의 크기만 변경됩니다.

 

layout_sample.zip

0.00MB