섹션 높이값 계산해서 특정 height 변경하는 방법
본문
모바일 전용 디자인입니다.
상단 헤더와 하단 이미지배너가 픽스되고,
중간의 메인 컨텐츠만 디바이스의 세로길이에 맞춰서 overflow-y:auto;되어 스크롤이 나오게 되어야해용.
따라서 상단 헤더와 하단이미지 배너의 높이값을 더해서
중간 메인컨텐츠에 height값으로 부여해야 합니다.
근데 어떻게 스크립트를 짜야할지 모르겠어용
http://muto.dothome.co.kr/page/main.html
<!-- 헤더 시작 = 상단에 fixed 되어 있는 요소 입니다. 높이값 계산 필요! (스크립트로 인클루드했습니다)-->
<div id="header_inc"></div>
<!-- 헤더 끝 -->
<!-- 컨텐츠 시작 = .content_wrap에 (height=상단 높이 + 하단 높이)가 들어가져야해요 -->
<div class="content_wrap">
....
(컨텐츠 내용 들어가는 부분)
</div>
<!-- 메인 광고 시작 = 하단에 fixed 되어 있는 요소 입니다. 높이값 계산 필요! (스크립트로 인클루드했습니다) -->
<div id="main_ads_inc"></div>
<!-- 메인 광고 끝 -->
답변 2
메인컨텐츠 하단이 안보여서 그런거라면 이미지 높이만큼 margin-bottom:150px
이렇게 해주면 되지 않을가요? 이미지가 변동되는거라면 그때마다 수정
이미지가 widht:100%라서 디바이스 마다 높이값이 달라지거든요
그래서 유동적으로 계산이 되야해용
아 추가로 설명드리자면
모바일에서 body에는 스크롤이 생기면 안되고, 메인컨텐츠(.content_wrap)에만 스크롤이 생기도록 해야합니당
답변을 작성하시기 전에 로그인 해주세요.