height:100% 적용

코딩하다보면 컨텐츠박스 안에 배경색을 지정해야할때가 있는데,

컨텐츠가 브라우저창보다 영역이 짧을경우,, 배경색이 브라우저 bottom까지 안먹고 컨텐츠까지만 짤리는 경우가 생긴다.

그밑으로는 흰색배경 ㅜ_ㅠ

height:100%를 줘도 안먹는경우가 생기는데

해결방법을 찾음.!

css파일에 이렇게 적용시키면 됨.

=====================================

html {height:100%}

body {height:100%}

적용시킬div {min-height: 100%;}   이게중요함!!!

wrapper {height:100%}    (적용시킬 div를 감싸는 상위 div (ex.wrapper)에도 적용)

=================================================

min-height를 넣지않으면,,  적용시킬 div 안에 컨텐츠가 브라우저 세로보다 짧을경우, 컨텐츠가 차지하고있는 영역만큼이 height 100%로 인식함.

예를들면, 컨텐츠가 500px을 차지할경우, 500px을 height:100%로 인식함.

 

*아니면 height:100%는 보통 absolute일때 먹게된다.

 

 

 

레이아웃 참고 블로그 http://blog.naver.com/mjyoo77/30112436969

 

 

 

---------------------------------------------------------------------

 

만약 left메뉴에 배경색이 들어가고 content부분은 흰색이라면, 위방법으로는

컨텐츠가 길경우에 left쪽이 밑에 하얗게 되는 현상이 발견된다.

 

그냥 배경으로 박자 -ㅅ-;;

body에 배경이미지를 잘라서 repeat-y 시키면,,깔끔하게 적용이됨.