css parents height

표정민·2020년 7월 17일
0
post-thumbnail

얼마 전 element가 position absolute의 속성을 갖고 있을 경우 부모 element의 height를 자식 element의 height 만큼 적용 가능한지에 관한 질문이 질문이 하코사에 올라와 있었다.
그 방법에 대하여 알아보자


하코사 질문 링크
https://cafe.naver.com/hacosa/274899


먼저 가능하다.

자식 요소의 비율을 계산해서 부모 요소에 padding-top 또는 padding-bottom을 주면 된다

가령 자식 요소가 positio absolute를 갖고 있고
비율이 가로, 세로 100px, 50px라면
paddin-top 또는 padding-bottom을 50%를 주면 된다.

다만 반응형 웹에 콘텐츠가 이미지가 아닌 텍스트로 height가 비율이 아닌 유기적으로 변동된다면 이는 css만으로는 불가능하다.

0개의 댓글