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

프로그래밍/자바스크립트 2018. 11. 16. 00:03
반응형

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


jQuery의 resize() 함수 사용하기



먼저 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>

$(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() 으로 주어진 시간이 지난 후에 풀려시 다시 이벤트를 처리합니다. 그 시간안에는 이벤트가 발생하더라도 처리 함수가 호출 되지 않도록 해줍니다.

반응형

댓글을 달아 주세요