CSS로 background 화면 꽉 채우는 방법

100% 채우고 싶은 영역에 height: 100% 로 하더라도,

콘텐츠 영역이 없는 부분은 덮어지지 않는다. border를 하던, background를 하던 콘텐츠 있는 만큼만 보여지게 된다.

 

그 채우고 싶은 영역의 height를 px로 지정하게 되면 당연히 화면이 스크롤되면서 영역이 안 잡힌다.

 

방법은 여러가지 있을 수 있겠지만,

html,body{

   height:100%;

   overflow:hidden;

}

html,body{

   height:100%;

   overflow:hidden;

}

 

을 추가하고 그 영역에는

.somebox{

    height: 100%;

    background: #2ecc71;

}

.somebox{

    height: 100%;

    background: #2ecc71;

}

 

와 같이 설정하면 된다.