맨땅에 헤딩 하면서 개발하고 있습니다.. nodejs 로 개발하다가 .

백엔드와 기능쪽에 .. 집중하다가 .. 어느정도 되가는거 같아서 ui 쪽을 만지는데 

css도 처음이고 html만 쪼금 알고 있어서 .. 코드가 장난 아니게 ㅜㅜ 더러워지고 있네요 

질문 드릴건 요즘 은 표도 잘 안쓰고 div로 모든걸 거의 다 처리 하는 추세라서 

<div>

    <div>

        <div>

        </div>

    </div>

</div>

이런 구조인데 ..  세번째 div 의 높이를 100% 로 줘야 할때 .. 그 위의 div를 상속 받아야 하는걸로 알고 있습니다.

그래서 두번째에 div 에 height  속성으로 100%

3번째도 100이런식으로 .. 피라미드 처럼 내려가고 있는데 .. 이게 아닌데 싶어서 질문 드립니다.. 

뭔가 잘못됐다고 보는데 원래 어떻게 해야 하는건지 모르겠습니다.. 검색도 어떻게 해야 하는지 모르겠구요 .. div 높이

이런걸로 검색하면.. div 안에 또다른 div 할때 어떻게 하는건지 이런것들만 나와있어서요 .. 

1번째 div 안에 .. 

<div>

    <div style="height:200px">

        test

    </div>

    <div style="height:100%">

        <div >

        </div>

    </div>

</div>이런식으로 2개의 div가 있을 경우에는.. 첫 div 가 600일 경우 ... 

안쪽 div 에서 200px 를 잡아먹고 .. 나머지 height 는 400뿐인데 .. 저렇게 100%으로 하면.. 600으로 잡혀서 .. div

오버하게 되구요 .. 

flex를 써야 하는건지 다른 방법이 있는건가요 ? 어떻게 찾다가 calc(100% - 200px) 이렇게 하면.. 200% 빠진게 

자동으로 계산이 되어서 .. 저런식으로 하고 있긴 한데 .. 이또한 아닌것 같아서 질문드립니다.. 

ui 에서 height 만 정복하면 다른건 쉬운거 같은데 항상 height 가 헷갈리네요 .. 답변이나 .. 참고 할 만한 url이나 

아무거나 괜찮습니다.. 리플 부탁 드립니다.