rgb 238 238 238값이 화면의 오른쪽 높이 전체를 차지하게 하고 싶은데,
height 100vh 값 혹은 100vmax, 100% 값을 아무리 줘봐도
그 안의 컨텐츠가 높이를 초과하게 되면 중간에 색깔이 끊겨 어색하게 보였다.
이때 html에 100%를 주고, 배경색값을 가지는 class의 높이 설정을 없애버리면 자동으로
height auto값이 되어 배경색이 컨텐츠만큼 늘어나게 된다.
어떤 요소가 뷰포트를 넘어 페이지 전체를 차지하게 하고 싶으면 html을 건드릴 것
html{
height: 100%
}
.right-side{
width: 43vmax;
float:right;
background-color: rgb(238, 238, 238);
padding-left: 3.5vw;
padding-right: 3.5vw;
cursor: pointer;
}자식 요소 높이를 없앤다고 항상 되는 것은 아니고, 부모 요소 전체에 height 100%를 줘야 할 때도 있다
문제상황
왼쪽과 오른쪽 색이 다른 html 페이지인데, 오른쪽에 back-ground css를 따로 준다.
오른쪽 div에는 테마 리뷰가 쌓이기 때문에, 리뷰가 적을때는 높이가 작고
많을 때는 해당 리뷰가 높이를 초과해서 오른쪽 전체를 배경색으로 감싸기가 어려웠다.
해결방안
이때 오른쪽이 아닌 왼쪽에 높이 100vh를 주고, 둘을 감싼 side div의 높이는 auto를 주면
내가 원하는 대로 리뷰가 많을 때나 적을 때나 대응 가능한 css가 만들어진다.
html body .wrap{
height: 100%;
}
.sides{
}
.left-side{
height: 100vh;
}
.right-side{
}
height값을 안주면 자동으로 auto