absolute 적용시 부모태그가 자식의 높이값을 인식하지 못하기 때문에 레이아웃이 깨지는 현상이 있음
부모태그에 height값을 지정해줘야 원하는 레이아웃 모양을 잡을 수 있다.
1. 직접 height 값을 지정해준다.
- 이건 좋은 UI가 아니다.
2. 부모 요소에게 overflow: hidden을 준다.
- 자식 요소가 float일 경우에만 가능.
- absolute일 때는 잡아주지 못 한다.
3. clearfix 이용
- 부모에게 가상 셀렉터 :after를 주고 다음과 같이 css를 준다.
- 부모:after {content: ''; display: block; clear: both;}
출처
https://sereni-ty.tistory.com/60
부모의 높이가 0일 때, 높이를 잡는 방법
1. 직접 height 값을 지정해준다. - 플레서블하지 못하기 때문에 좋은 UI는 아님 2. 부모 요소에게 overflow: hidden을 준다. - 단 자식 요소가 float일 경우에만 가능. - absolute일 때는 잡아주지 못 한다. 3. c
sereni-ty.tistory.com
'Development > CSS & SCSS' 카테고리의 다른 글
| CSS in JS (0) | 2022.06.15 |
|---|---|
| CSS 모듈 (0) | 2022.06.15 |
| 페이지 전체를 스크롤 시, 해당 영역 상단에 고정시키고 싶을 때 (0) | 2022.05.16 |
| 카테고리 탭 구현하기 (0) | 2022.05.13 |
| 반응형 웹 단계별 해상도 (0) | 2022.05.03 |