헤더, 사이드바, 메인화면으로 나눠야 하는 경우
사이드바가 height 100%를 가져야하고,
메인 화면도 height 100%를 가져야하는데,
헤더 높이만큼 배경색이 먹지 않는다.
이 경우 그냥 색을 한번 더 주었다.
html
<html>
<body>
<header>
<div class="mypage-wrapper">
<div class="sidebar"></div>
<div class="mypage-main"></div>
</div>
</header>
</body>
</html>css
html, body {
height: 100%;
background-color: #f5f5f5;
}
.mypage-wrpper {
display: flex;
}
.sidebar {
background-color: #fffff;
}
.mypage-main {
background-color: #f5f5f5; //끊겨서 비는 부분 한번더 배경색 줌
height: 100%;
width: 100%;
}
hello world!