div 내 width:100% 사용에 관한 질문 정보
div 내 width:100% 사용에 관한 질문본문
<div></div>과같이 쓰게 되면
default로 height는 0, width는 전체에 영역이 잡힌다.
그래서, 여태까지 style="width: 100%" 와 같다고 생각했는데, 큰 착각이었다.
만약, width를 주지 않고 <div></div>로 사용 했을 경우 margin이나 padding을 주면
margin과 padding영역까지 고려해서 width가 할당되지만
<div style="width: 100%"></div>와 같이 사용하게 되면 margin과 padding을 고려하지 않고
부모의 width 크기 전체로 잡는다.
따라서 <body>의 밑에 <div> 태그가 있을 경우 margin이나 padding을 준다면 (ex. padding: 10px;)
100% + 20px이 되기 때문에 20px만큼 body에 스크롤이 생긴다.
-------------------------------!
위 내용은 검색을 통해 어떤 블로그에 있는 내용을 인용한 것 입니다.
설명대로 div 내에 width:100% 을 입력하지 않으면 실제 padding 값을주게 될 경우 전체 크기가 100% + @ 가 되는 현상이 있습니다.
하지만.. 문제는.. IE 에서만 그렇다는것 입니다.
크롬에서는 오히려 width:100% 를 없애야 정확하게 100% 를 표현합니다.
IE 에서는 100%+@ 가 되는 현상이 있습니다.
반대로 width:100% 를 옵션을주면 IE 에서는 정확하게 100% 를 표현합니다.
크롬에서 100%+@ 가 되는 현상이 나타납니다.
이와 같이 다른 브라우저에서도 100% 를 정확하게 표현하려면 어떻게 스타일을 줘야하는건지 궁금합니다.
default로 height는 0, width는 전체에 영역이 잡힌다.
그래서, 여태까지 style="width: 100%" 와 같다고 생각했는데, 큰 착각이었다.
만약, width를 주지 않고 <div></div>로 사용 했을 경우 margin이나 padding을 주면
margin과 padding영역까지 고려해서 width가 할당되지만
<div style="width: 100%"></div>와 같이 사용하게 되면 margin과 padding을 고려하지 않고
부모의 width 크기 전체로 잡는다.
따라서 <body>의 밑에 <div> 태그가 있을 경우 margin이나 padding을 준다면 (ex. padding: 10px;)
100% + 20px이 되기 때문에 20px만큼 body에 스크롤이 생긴다.
-------------------------------!
위 내용은 검색을 통해 어떤 블로그에 있는 내용을 인용한 것 입니다.
설명대로 div 내에 width:100% 을 입력하지 않으면 실제 padding 값을주게 될 경우 전체 크기가 100% + @ 가 되는 현상이 있습니다.
하지만.. 문제는.. IE 에서만 그렇다는것 입니다.
크롬에서는 오히려 width:100% 를 없애야 정확하게 100% 를 표현합니다.
IE 에서는 100%+@ 가 되는 현상이 있습니다.
반대로 width:100% 를 옵션을주면 IE 에서는 정확하게 100% 를 표현합니다.
크롬에서 100%+@ 가 되는 현상이 나타납니다.
이와 같이 다른 브라우저에서도 100% 를 정확하게 표현하려면 어떻게 스타일을 줘야하는건지 궁금합니다.
댓글 전체
dtd 선언
감사합니다.
주석 처리해두었던걸 깜빡하고 왜 안되는지 한참을 돌아다녔네요.
주석 처리해두었던걸 깜빡하고 왜 안되는지 한참을 돌아다녔네요.
