컴포넌트 높이 100% 으로 설정하려면 어떻게 해야할까요?

Question

css로 매번 고통받는 웹 개발자 입니다.자식 컴포넌트의 높이 100%으로 설정하는 방법을 알고 싶습니다....extra 부분을 height 100% 로 인라인 스타일로 지정 했지만, 늘어나지 않습니다.원인은. height 100% 를 하면 부모 태그의 기준으로 100% 로 설정되는데, 부모가 화면을 꽉 채우지 않기 때문이라는 것을 알았습니다. 그래서 바로 위 부모의 높이를 100% 으로 설정했지만 그 위의 부모.. 부모 부부부부부부부부 모 전부 100% 가 아니기 때문에 그 위에있는 모든 부모의 높이를 설정하지 않으면 제가 원하는 부분의 높이가 100%으로 설정 안 되더군요!최종적으로 2번재 사진처럼 extra 라벨이 있는 부분을 화면 밑까지 쭈욱 늘리고 싶은데 어떻게 해야 할까요?현재로서는 자식 위의 모든 부모를 height 100%로 설정하는 방법 밖에 모릅니다. 이런 방법이 맞다고 생각되지 않아 이렇게 글을 남겨봅니다..추가로 css 에 대해 깊게 자세히 공부하고싶은데. 어떤 책을 봐야할지 어디서 공부해야할지 알고싶어요매번 이런 css 이슈 때문에 고통 받고 있어 고통에서 벗어나고 싶네요 ㅠㅠ

BGProgramming · Answer

음.... 개인적으로는 테이블로 화면을 구성하는 것은 추천하지는 않습니다.옛날 2000년대 초반 나모 웹에디터 사용했을 때에는 많이 했던 방식입니다만...그냥 제 경우는 flex를 사용해서 설정할 것 같습니다.말씀하신 문제는 디자인 및 레이아웃으로 달라질 수 있는 문제입니다.특히 height는 같은 ui라도 어떻게 레이아웃을 구성할거냐에 따라서도 달라지는 부분입니다.그냥 정말 간단하게 화면을 구성한다면....body 혹은 root div에 100vh를 먹여버리고 display:flex그리고 extra 쪽을 flex-grow로 채워버리면 됩니다.테이블이 아니라 레이아웃을 flex로 하시면 조금 쉬울 겁니다.

킁킁탐정 · Answer

100%대신 100vh라고 적어보세요. 그리고 다음을 참고하세요.https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_unitscss의 첫 걸음은, position(sticky, fixed, absolute), inline, block, grid, flex 같은 레이아웃에 관련된 것부터학습하는게 좋습니다. 그리고 나서 실질적인 눈에 보이는 시각적인 부분과 함께 css selectors에 관해서 알아보면조금 수월하게 한 걸음 나아갈 수 있습니다.다음을 연관 문서를 모두 한 두번 읽어보고 학습하면 도움이 되실겁니다.https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/https://www.joshwcomeau.com/css/interactive-guide-to-grid/https://www.joshwcomeau.com/css/understanding-layout-algorithms/https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectorshttps://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

세브라이드 · Answer

부모 전부 height 100% 주는게 맞습니다. CSS는 Cascading style sheets의 약자입니다. Cascading의 의미를 잘 생각해보세요.더 원론적으로 가면, div 구조 자체가 잘못 짜여지긴 했네요.넥사크로같은 서비스를 쓰셔서 개발하는건가요? 그럼 감수해야죠 뭐...

컴포넌트 높이 100% 으로 설정하려면 어떻게 해야할까요?

3개의 답변

기술 목록