프론트엔드 첫걸음

height 100%를 쓰는 이유 본문

개발 공부/CSS

height 100%를 쓰는 이유

차정 2023. 11. 2. 12:52

너무나도 기본중의 기본인데 나처럼 확실하게 모르고 있었던 사람 있으리라 생각하며 기록으로 남긴다.

 

 

 

 

See the Pen hegiht 100%가 필요한 이유 by JEONG (@cona) on CodePen.

grandParent에 height 100px을 지정해주었다.

parent에 height 100%가 없다면 child는 height 30%해줘도 부모의 height를 모르기때문에 30%가 적용되지 않는다.

parent에 height:100% 을 사용하지 않고, child div에서 grandParent div의 높이를 상속받고 싶다면 relative를 사용하면 된다.

 

 

See the Pen height 100% 없이 relative로 부모 높이 상속받기 by JEONG (@cona) on CodePen.

 

 relative absolute 헷갈린다면 아래 정리 참고

 

 

https://creamilk88.tistory.com/197

 

[CSS] CSS Position (relative, absolute) 한 방에 정리!

목차 1. Position 속성 1-1. Relative 1-2. Absolute 1-2-1. 부모 relative & 자식 absolute 1-2-2. 조상 relative & 자식 absolute 1-2-3. 조상 position 없음 & 자식 absolute 1-3. Fixed CSS Position CSS Position 요약 position 속성을 통해

creamilk88.tistory.com



'개발 공부 > CSS' 카테고리의 다른 글

이미지를 parent 요소의 패딩 무시하고 화면을 가득 채우도록 만들기  (0) 2024.03.20
scrollHeight사용해서 accordian의 transition 효과 구현하기  (0) 2023.11.02
svg 아이콘 색바꾸기 어떻게 하나요?  (0) 2023.09.25
길이가 각각 다른 list item 중앙 정렬  (0) 2023.09.21
clip-path transition  (0) 2023.08.29
'개발 공부/CSS' Related Articles more