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 경우에도 넣어주세요~
그럼..
전 이만..
일하러..ㅠ
열일하세요~
'skill > HTML.Javscript.CSS' 카테고리의 다른 글
[javacirpt] jquery 스크롤 자동 이동 + 부드럽게 이동 (0) | 2021.05.12 |
---|---|
vue.js 기본 (0) | 2019.02.08 |
자동 색 변경_javascript, jquery (0) | 2017.01.17 |
공지사항롤링_javascript, css, html (1) | 2017.01.17 |
헤더부분 고정 시키고 내용부분 스크롤 시키기 (0) | 2016.12.19 |