컨테이너를 넘치지 않고 텍스트 상자 너비를 100%로 만드는 방법은 무엇입니까?

100% 너비 텍스트 상자의 한계 극복

웹 개발에서는 텍스트 상자를 완전히 차지해야 하는 딜레마에 직면하는 경우가 많습니다. 컨테이너의 경계를 초과하지 않고 의도된 너비입니다. "display:block; width: 100%"로 CSS 스타일을 할당하는 것은 간단한 해결책처럼 보일 수 있지만 텍스트 상자의 기본 여백, 테두리 및 패딩으로 인해 예상치 못한 문제가 발생할 수 있습니다.

이렇게 하면 아래 예에서 볼 수 있듯이 텍스트 상자가 실제 컨테이너 크기보다 더 넓게 나타납니다.

<code class="html"><div id="outer">
  <div id="inner">
    <input type="text" class="wide">
    <div style="clear:both;"></div>
  </div>
</div></code>

원하는 효과 달성

이 문제를 해결하고 텍스트 상자가 컨테이너 너비를 초과하지 않도록 CSS3에는 'box-sizing: border-box' 속성이 도입되었습니다. 이는 내부 패딩과 외부 테두리를 모두 포함하도록 '너비'의 정의를 재정의합니다.

그러나 CSS3의 지속적인 개발로 인해 이 속성은 현재 다양한 브라우저에서 다른 이름을 갖습니다.

<code class="css">input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}</code>

이전 브라우저에 대한 대체 접근 방식

브라우저 호환성이 문제인 경우 대체 접근 방식은 포함된