웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

IE에서 height 100% 사용시 div 태그에 margin-bottom 적용 안되는 현상

Last Modified : 2016-01-21 / Created : 2015-10-26
7,356
View Count
div 태그에 height가 100% 적용된 경우 안에 있는 요소의 margin-bottom이 반영이 안되는 문제가 IE(익스플로러)에서만 발생하였습니다. 이 문제를 해결할 수 있는 방법이 무엇이 있는지 알아봤으며 그 방법에 대한 내용입니다.


# div태그에 padding-bottom 속성 추가
- 해결안됨
; 내부 태그에 margin-bottom을 빼고 div에 padding-bottom을 추가하였습니다. 하지만 똑같이 height: 100%에 적용되지 않았습니다.


# 내부 태그에 : 또는 :: 선택자를 사용해 margin과 동일한 크기의 여백을 만드는 방법
- 해결안됨
; 이 역시 height: 100%에 적용되지 않았습니다.

해결 가능할 것으로 예상되었던 위 2가지 방법이 모두 적용되지 않았습니다. 검색해 보니 특별한 방법은 없는 것 같습니다...


결론 !!
- 해결됨
여백에 사용할 공간인 margin-bottom을 빼고 내부에 div등의 또 하나의 태그를 추가하기...
margin 태그를 쓰면서 해결하는 것은 어려울 것 같습니다... 여백에 사용한 태그를 추가하는 것이 정답입니다.
아래의 글도 찾고 계시지 않나요?

    Previous

    html로 탭메뉴(Tab Menu) 만드는 방법

    Previous

    input 태그 placeholder 텍스트 색상 변경하기