[TailWind] calc() 를 사용해서 height 크기를 정해보자.

내가 가지는 문제는 이러했다.

  <div className="h-screen">
      <div className="flex h-[85%]"> // 부모
        <div className="w-full h-full"> // 자식 A
          <div className="w-full h-[8rem]"> // 자식 a : 점수판
          </div>
          <div // 자식 b : 게임 진행 부분
            className="w-full aspect-[4/2.2]"
          >
        </div>
        <MiniChatting /> // 자식 B : 채팅 부분
      </div>
    </div>

 

페이지가 위 같은 html 형식으로 구조가 되어있다. 근데 문제점이 있다. 먼저 채팅과 게임 부분의 높이가 맞지 않아서 이쁘지가 않다...

 

aspect-[4/2.2]는 4 : 2.2 비율로 width, height를 했는데 비율을 하나씩 조정을 해서 height를 맞출 수도 없어서 다른 방법을 찾기로 하였다. 

 

먼저 그래서 자식 b의 height를 h-full 로 했더니 

 

 

이런 식으로 부모의 height 크기만큼 커져버렸다. 이게 만약에 flex-row 였을 경우에는 상관이 없겠지만, 지금은 flex-col이기 때문에 h-full은 사용할 수가 없다. 그래서 여기서 사용할 방법은 calc() 함수를 사용하는 것이다. 

  <div className="h-screen">
      <div className="flex h-[85%]">
        <div className="w-full h-full">
          <div className="w-full h-[8rem]">
          </div>
          <div
            className={`w-full h-[calc(100%-8rem)]`}
          >
        </div>
        <MiniChatting />
      </div>
    </div>

 

위처럼 자식 a의 height 크기만큼 빼준 나머지를 height로 하겠다는 뜻이 된다. 

calc()함수를 사용하면 css에서 계산식을 사용할 수 있게 된다. 꽤나 좋은 기능인 것 같다. 

 

고친 결과는 이렇게 나오게 된다.