부모 높이와 동일한 높이 div를 만드는 방법

안녕 장인,
오늘 이 블로그 게시물에서는 부모 높이 div와 동일한 높이를 만드는 방법을 보여 드리겠습니다.

대부분의 경우 높이가 같은 div를 만들어야 합니다. div의 길이가 다른 단락이 있으면 div가 이상하게 보일 수 있기 때문입니다. 따라서 동일한 높이의 div를 만드십시오. 다음 코드를 참조하십시오.

더 나아가기 전에 더 많은 게시물을 보려면 나를 팔로우하세요.

[삭제 된 사용자]

이제 코드를 보자

 <h3>Example of same height div with its respective parent height </h3>
 <div class="container">
    <div class="child-div-1"><p>Div 1</p></div>
    <div class="child-div-2"><p>Div 2</p></div>
    <div class="child-div-3"><p>Div 3</p></div>
 </div>

css 파일을 만들고 아래 css 코드를 추가합니다.

.container {
  display: flex;
  background: #ffc;
  height: 50vh;
}
.child-div-1 {
  background: #000;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-1 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: #fff;
}

.child-div-2 {
  background: #ee6;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-2 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: #000;
}

.child-div-3 {
  background: #fdd;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-3 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: brown;
}

결과에 대한 코드 펜을 참조할 수도 있습니다.



읽어주셔서 감사합니다 🦁 🦄