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

요소 너비를 만드는 방법: 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등)은 최신 브라우저에서 필요하지 않습니다.

이것이 우리가 CSS에 있는 이유입니다.

예제를 편집했는데 이제 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%.

jsFidle 데모:

• 유지하기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%에서 고정 픽셀 양을 뺀 값
웹 활력별(https://stackoverflow.com/users/713523/webvitaly)
원본 출처: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

여기에 복사한 것입니다. 왜냐하면 다른 스레드에서 거의 놓칠 뻔했기 때문입니다.

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

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

그러면 안쪽 부분이 어느 쪽이든 15px보다 작아야 할 폭으로 늘어나게 됩니다.

다음은 codeontrack.com 의 권장 사항으로, 솔루션 사례가 우수합니다.

를 100div 너 비 100% 로 하 의 auto 설 다 고 확 니 합 인 다 을 음 하 정 대 신 는 를 로 정 설 로 니 다 합 , , ▁sure 확 ▁instead 인 ▁the ▁it ▁be ▁set ▁and ▁of ▁the ▁width ▁auto<div>과 같이": "(으)로 표시됨:<div>).

당신은 몇 가지 위치 맞추기 묘기를 시도해 볼 수 있습니다.다음과 같이 입력을 디비에 넣을 수 있습니다.position: relative그리고 고정된 높이, 그리고 입력에서.position: absolute; left: 0; right: 0;그리고 좋아하는 패딩.

실시간 예제

입력 상자의 패딩을 래퍼 요소로 이동합니다.

<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;
    left: 0;
    right: 0;

그런 다음 여백/패딩을 원하는 대로 만들 수 있으며 요소가 사용 가능한 너비를 초과하여 확장되지 않습니다.

이것은 @andology의 답과 유사하지만 만약 당신이 왼쪽/오른쪽을 모두 0으로 만든다면 당신은 만들 수 있습니다.margin및/또는padding당신이 원하는 것은 무엇이든지.그래서 이것은 항상 나의 기본값입니다.div.

너비:auto;와 너비:100%, 너비:auto;윌(AUTO)의 차이를 이해하면 패딩을 포함한 래핑 디브의 정확한 크기에 맞게 너비가 계산됩니다.너비 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: auto;
padding: 20px;

언급URL : https://stackoverflow.com/questions/5219175/how-to-make-an-element-width-100-minus-padding