퍼블리싱 질문
본문
위와같은 홈피 레이아웃을 사용합니다.
html body등은 css 상에서 세로 100%준 상태이고
#warp {height:100%} //전체를 감싼 div
입니다........
문제는 footer 부분의 위 이미지 처럼 짙은 실버색상이 들어가는데
모니터가 큰 경우 아래에 흰 공백이 생겨버립니다.
의도는 저 짙은 실버색상이 깔끔하게 끝까지 딱 떨어지면 좋겠습니다.
footer의 스타일을 height 100% 줘버리니 모니터의 세로 사이즈 만큼 더 늘어나버리더라구요.
해결방안이 없는지요;;;;;;
답변 4
body 의 background 를 #footer 의 background 값과 동일하게 지정하시면 간단하게 해결하실 수 있습니다.
단 로딩 속도, Contents 영역 색과의 명도대비 등에 따라 페이지 로드 시 깜빡이는 듯한 느낌을 받을 수도 있습니다.
스크롤시에는 어떤것을 원하시는건가요..
가령 컨텐츠 부분이 내용물이 많아질때 스크롤이 생기면서 foot가 아래로 내려가는데..
1.스크롤이 생겨도 foot가 하단에 고정이다..
2.컨텐츠에 내용물이 없을때 foot가 하단에 붙고 컨텐츠가 많아서 스크롤이 생길때는
일반 윕페이지처럼 foot가 내려간다..
위 같을때..
1.은 position: fixed; 를 사용하는 수밖에는 없구요..
2. 같은 경우는 아래와 같이 css로 컨트롤 하면 될것 같네요.
3. 아님 다른 내용의 질문인가요???
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#header {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
}
#body {
min-height: 100%;
margin: -100px 0 -50px;
}
* html #body {
height: 100%;
}
#contents{
padding: 100px 0 50px;
}
#footer {
height: 50px;
background: #ddd;
}
contents 부분에 min-height 값을 넉넉히 주셔서 항상 footer가 화면밖으로 나가게 하세요.
그 방법 밖에 없습니다.
높이는 100% 안잡혀요
푸터를 하단에 고정 시키던가
absolute fixed로
제이쿼리로 브라우저 높이 체크 후 높이를 주는 방법 뿐이에요
