요소 너비를 만드는 방법 : 100 % 빼기 패딩?

html 입력이 있습니다.

입력은 padding: 5px 10px;부모 div의 너비 (유체)의 100 %가되기를 원합니다.

그러나를 사용 width: 100%;하면 입력을 100% + 20px어떻게 해결할 수 있습니까?

예

box-sizing: border-box 빠르고 쉽게 고칠 수있는 방법입니다.

이것은 모든 최신 브라우저 및 IE8 이상에서 작동합니다.

데모는 다음과 같습니다. http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

최신 브라우저에서는 브라우저 접두사 버전 ( -webkit-box-sizing등)이 필요하지 않습니다.

이것이 box-sizingCSS에 있는 이유 입니다.

예제를 편집했으며 이제 Safari, Chrome, Firefox 및 Opera에서 작동합니다. 확인하십시오 : http://jsfiddle.net/mathias/Bupr3/ 내가 추가 한 것은 다음과 같습니다.

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

불행히도 IE7과 같은 오래된 브라우저는이를 지원하지 않습니다. 오래된 IE에서 작동하는 솔루션을 찾고 있다면 다른 답변을 확인하십시오.

패딩도 백분율로 사용하고 너비에서 제거하십시오.

패딩 : 5 %;
폭 : 90 %;

box-sizing와 같은 명확한 솔루션 을 사용하지 않고 할 수 있습니다 width~=99%.

jsFiddle 데모 :

• 입력의 유지 padding및border
• 음수 가로 입력에 추가 margin= border-width+horizontal padding
• 이전 단계와 padding동일한 입력 래퍼 가로에 추가margin

HTML 마크 업 :

<div class="input_wrap">
    <input type="text" />
</div>

CSS :

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

CSS calc () 사용

매우 간단하고 굉장합니다.

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}​

여기에서 볼 수 있듯이 : Div 너비 100 %에서 고정 된 양의 픽셀 빼기
webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
원본 출처 : http://web-profile.com.ua/css/dev/css -폭 -100prc- 빼기 -100px /

다른 스레드에서 거의 놓 쳤기 때문에 이것을 여기에 복사했습니다.

내가 15px 패딩이있는 컨테이너에 있다고 가정하면, 항상 내부 부분에 사용하는 것입니다.

width:auto;
right:15px;
left:15px;

그것은 15px 어느 쪽보다 작아야하는 너비로 안쪽 부분을 늘릴 것입니다.

포지셔닝 트릭을 시도해 볼 수 있습니다. 입력을 position: relative고정 높이 로 div에 넣은 다음 입력에 position: absolute; left: 0; right: 0;, 원하는 패딩을 넣을 수 있습니다.

라이브 예

다음은 좋은 솔루션 예제가있는 codeontrack.com 의 권장 사항입니다 .

div의 너비를 100 %로 설정하는 대신 auto <div>로 설정하고가 표시 : block (기본값 :)으로 설정되어 있는지 확인하십시오 <div>.

입력 상자의 패딩을 랩퍼 요소로 이동하십시오.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

여기에 예를 참조하십시오 http://jsfiddle.net/L7wYD/1/

width : auto의 차이점을 이해하십시오. 폭 : 100 %; 폭 : 자동; 패딩을 포함하여 줄 바꿈 div에 주어진 정확한 값을 맞추기 위해 너비를 자동으로 계산합니다. 너비 100 %는 너비를 확장하고 패딩을 추가합니다.

컨테이너에 싸서 어떻습니까? 컨테이너는 다음과 같은 스타일을 가지고 있습니다.

{
    width:100%;
    border: 10px solid transparent;
}

이 시도:

width: 100%;
box-sizing: border-box;

나에게을 사용 margin:15px;padding:10px 0 15px 23px;width:100%하면 결과는 다음과 같습니다.

나를위한 해결책은 width:auto대신에 사용하는 것이 었습니다 width:100%. 내 새 코드는 다음과 같습니다

margin:15px;padding:10px 0 15px 23px;width:auto. 그런 다음 요소가 올바르게 정렬되었습니다.

나는 같은 문제가 있었다. 다음과 같이 수정하십시오.

width: 100%;
box-sizing: border-box;

당신은 이것을 할 수 있습니다 :

width: auto;
padding: 20px;