Height 100% 적용 안될 때

728x90

Height 100% 적용안되는 이유

1. height 100% 설정하려면 부모요소의 height값이 명확하게 설정 되 있어야 합니다.

따라서 부모요소의 height값이 제대로 정의 되어있는지 확인합니다.

2. min-height와 height값이 동시 적용되어있는 경우에는 최소 height 값을 기준으로 height:100%가 적용됩니다.

3. 그래도 안될경우 사용할 방법입니다.

이도저도 안될경우 해결한 트릭중 하나 입니다.

<style>
  position:absolute;
  top:0;
  bottom:0;
</style>

4. height와 width속성에 따로 값을 설정하지 않았다면 default 값인 auto로 지정됩니다. auto값은 브라우저가 그 크기를 계산해 줍니다.

5. display:block;로 설정 되있는 경우 width:auto;는 width:100%로 설정 됩니다. height:auto;는 높이값이 0부터 시작해서 요한 만큼의 값을 갖도록 합니다.

즉 요소가 가지고있는 자식 높이 만큼 자동 조절 됩니다.

6. display:inline일 경우 width:auto와 height:auto는 둘다 0과 같습니다. inline요소는 크기를 지정할 수도 없고 필요한 만큼의 높이와 너비만 갖게 되어있기 때문입니다.

높이 100%로 꽉채우는 방법

1. 최상위 엘리먼트의 height : 100%;를 넣어줍니다.

2. css3 vh 사용

.image {
  background-image: url(./bg.jpg);
  height: 100vh;
 }

vh는 viewport 기준 height비율입니다.

100vh를 하면 화면의 높이 100%를 의미합니다.

728x90

mooyou