skill/HTML.Javscript.CSS

위 화면 고정, 컨텐츠 화면 스크롤 시키기_javascript, css, html

have a nice day :D 2017. 1. 17. 14:03
반응형

header 부분 고정 시키고,

contents 부분 스크롤 하는 방법


javscript / css / jquery /css


* html

<body>

<header> // header 부분</header>

<article>

// contents 부분

</article>


* css

html, body {overflow:hidden;}

header {50px}

article {height:100%;overflow-y:auto} 


세로 길이만 확장할 거에요~

보통 앱 만들때 세로만 확장하고

가로는 안하시죠?

???


여기까지는 보통 하셨을거에요~ 

근데 적용안되시죠?

아래 코드가 들어가야합니다.

* javascript

$(document).ready(function() {

// 화면 로딩 완료 후

layout();

});


$( window ).resize(function() {

// 화면 크기 변경 시

layout();

});

function layout(){

// 컨텐츠 부분 사이즈를 정확히 등록해 주셔야 overflow-y : auto가 적용됩니다~

$("article").css("height", ($("body").height() - $("header").outerHeight()));

}

overflow:auto 지정 법은

꼭 속성의 width, height값을 정해주셔야 합니다.

100% 이런거 말구요~

(article 위에 header 값이 있기 때문에,

aitlcle이 body와 같은 100% 이면 관계없음.)


로딩과, 꼭꼭! 화면 resize 경우에도 넣어주세요~


그럼..

전 이만..

일하러..ㅠ


열일하세요~



반응형