CSS에 패딩이있을 때 넘치지 않고 TextArea를 100 % 너비로 만들려면 어떻게합니까?

426

다음 CSS 및 HTML 스 니펫이 렌더링됩니다.

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>
스 니펫 확장

문제는 텍스트 영역이 부모보다 8px 더 넓습니다 (테두리의 경우 2px + 패딩의 경우 6px). 테두리와 패딩을 계속 사용하지만 전체의 크기를 textarea부모의 너비로 제한하는 방법이 있습니까?

html  css  stylesheet 
— 에릭 스쿠 노버
소스
Btw 여기에 tutsplus 에 Jeffrey Way의 좋은 기사가 있습니다. net.tutsplus.com/tutorials/html-css-techniques/… 아마도 누군가에게 도움이 될 것입니다.)
— 누군가

답변:

664

해킹을 잊어 버리고 CSS로 해보는 것이 어떻습니까?

내가 자주 사용하는 것 :

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

여기에서 브라우저 지원을 참조 하십시오 .

— 피에트 비즐
소스
22
나는 이것이 효과가 있다고 믿을 수 없다. 그러나 그것은했다. CSS는 결코 쉬운 일이 아닙니다. :-)
— 네이트 버드
1
이것은 내가 한동안 찾은 가장 멋진 것들 중 하나 여야합니다. IE7에서도이를 수행 할 수있는 방법이 있습니까?
— Jeremy A. West
47
border-box와 함께 width : 100 %를 계속 사용하고 싶습니다.
— Tyler
3
이전 버전의 Internet Explorer는 테두리 상자 동작 만 사용하지 않습니까?
— Peter Hedberg
3
누군가가 이것을 설명 할 수 있습니까?이 수업은 어디로 갑니까? 텍스트 영역을 둘러싼 div?
— koolaang
81

많은 CSS 형식 문제에 대한 답은 "다른 <div>를 추가하십시오!"

그래서 그 정신에서 테두리 / 패딩이 적용되는 래퍼 div를 추가 한 다음 100 % 너비의 텍스트 영역을 그 안에 넣었습니까? 다음과 같은 것 (예상치 않은) :

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
스 니펫 확장

— 데이브 셰로만
소스
1
나는 % 너비를 사용하지 못하게되었습니다. 나는 당신의 접근 방식이 잘 작동한다고 믿습니다. 감사!
— Eric Schoonover
5
"."를 추가하는 것을 잊지 마십시오. textwrapper 클래스에.
— Chris Porter
3
@Chris : 감사합니다. 누군가 그것을 잡는 데 거의 1 년 반이 걸렸다는 데 약간 놀랐습니다.
— Dave Sherohman
2
이 경우 텍스트 영역의 스크롤 막대는 어떻게 표시됩니까?
— Daniel LeCheminant
1
크롬에서는 텍스트 영역 요소에 초점을 맞출 때 자동으로 강조 표시되며 div 래퍼에 패딩을 만들면이 패딩이 표시되고 그로 인해 두 개의 테두리가 표시됩니다. 하나는 hightlighting에서, 다른 하나는 .textwrapper border : 1px solid # 999999;
— 누군가
22

우리가 달성하고자하는 것의 최종 출력을 고려해 봅시다 : 경계와 패딩이있는 패딩 된 텍스트 영역, 클릭하면 텍스트 영역에 포커스를 전달하는 특성, 자동 100 % 너비의 이점 블록 요소의 전형.

내 생각에 가장 좋은 방법은 최대한 낮은 수준의 솔루션을 사용하여 최대 브라우저 지원에 도달하는 것입니다. 이 경우 Javascript (어쨌든 우리 모두가 좋아하는)를 사용하지 않고 HTML 만 제대로 작동 할 수 있습니다.

LABEL 태그는 이러한 동작이 있으며 해결해야하는 입력 요소를 포함 할 수 있기 때문에 도움이됩니다. 기본 스타일은 인라인 요소 중 하나이므로 레이블에 블록 표시 스타일을 지정하면 패딩 및 테두리를 포함하여 자동 100 % 너비를 사용할 수 있으며 내부 텍스트 영역에는 테두리, 패딩 없음 및 100 % 너비가 있습니다. .

W3C 사양을 살펴보면 다음과 같은 이점이 있습니다.

  • "for"속성이 필요하지 않습니다. LABEL 태그에 대상 입력이 포함 된 경우 클릭하면 하위 입력에 자동으로 초점을 맞 춥니 다.
  • 텍스트 영역의 외부 레이블이 이미 디자인 된 경우 지정된 입력에 하나 이상의 레이블이있을 수 있으므로 충돌이 발생하지 않습니다.

자세한 내용은 W3C 관련 사항 을 참조하십시오.

간단한 예 :

.container { 
  width: 400px; 
  border: 3px 
  solid #f7c; 
  }
.textareaContainer {
	display: block;
	border: 3px solid #38c;
	padding: 10px;
  }
textarea { 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  border-width: 0; 
  }
<body>
<div class="container">
	I am the container
	<label class="textareaContainer">
		<textarea name="text">I am the padded textarea with a styled border...</textarea>
	</label>
</div>
</body>
스 니펫 확장

.textareaContainer 요소의 패딩 및 테두리는 텍스트 영역에 제공하려는 요소입니다. 원하는 스타일로 편집하십시오. 클릭 할 때 그 동작을 볼 수 있도록 .textareaContainer 요소에 크고 눈에 띄는 패딩과 테두리를주었습니다.

— 에마누엘레 델 그란데
소스
크로스 브라우저가 무엇을 숨겨야할지 모르겠지만 접근 방식이 마음에 들었습니다. +1
— HRJ
15

패딩 너비에 대해 너무 신경 쓰지 않으면이 솔루션은 실제로 패딩도 백분율로 유지합니다.

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

완벽하지는 않지만 패딩이 생기고 너비가 100 %까지 증가하므로 모든 것이 좋습니다

— qui
소스
12

나는 여기에 다른 해결책을 보았습니다. 너무 간단하다 : 텍스트 영역의 컨테이너에 추가 패딩 오른쪽을. 이렇게하면 텍스트 영역에 여백, 테두리 및 패딩이 유지되므로 Beck이 크롬과 사파리가 텍스트 영역 주위에 놓은 포커스 하이라이트에 대해 지적한 문제를 피할 수 있습니다.

컨테이너의 오른쪽 여백은 텍스트 영역의 양쪽에있는 유효 여백, 테두리 및 여백의 합계와 컨테이너에 필요한 다른 여백의 합이어야합니다. 따라서 원래 질문의 경우 :

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}

<div class="textareacontainer">
    <textarea></textarea>
</div>
— 브라이언
소스
1
+1 이것은 CSS3 문보다 더 많은 브라우저에서 작동합니다. 불행한 사실은 세상에 여전히 래퍼 div가 필요하다는 것입니다.
— BenSwayne
나는이 답변을 정말로 좋아한다. 100 % 미만의 매직 퍼센트 숫자없이 텍스트 영역을 맞추도록합니다. 랩퍼의 모든면에 패딩을 사용하여 텍스트 영역을 강제로 이동시키고 부모 내부로 유지시킬 수 있습니다. 래퍼의 최소 높이와 높이도 100 % 여야합니다. 그런 다음 동일한 패딩으로 텍스트 영역을 100 %로 설정하여 모든 것을 완벽하게 맞출 수 있습니다.
— justdan23
9

이 코드는 IE8 및 Firefox에서 작동합니다.

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
— 제프 게스트
소스
크롬에서도 일했습니다.
— Sanjeev
5

box-sizing 속성을 사용할 수 있으며, 모든 주요 표준 호환 브라우저와 IE8 +에서 지원됩니다. 그래도 IE7에 대한 해결 방법이 필요합니다. 자세한 내용은 여기를 참조 하십시오 .

— 즈 프고
소스
@DavidJohnstone : 그리고 더 이상 IE7 이상의 사이트를 개발하지 않기 때문에 이것이 해결책입니다 :)
— Jonatan Littke
2

아니요, CSS로는 그렇게 할 수 없습니다. 이것이 바로 마이크로 소프트가 처음에 또 다른 실용적인 박스 모델을 도입 한 이유입니다. 입니다. 결국 승리 한 박스 모델은 백분율과 단위를 혼합하는 것이 실용적이지 않습니다.

패딩과 테두리 너비를 부모의 백분율로 표현해도 괜찮다고 생각하지 않습니다.

— 부티 옥사
소스
2

CSS 솔루션 대신 인라인 스타일링 솔루션을 찾고 있는데 이것이 반응 형 텍스트 영역에 가장 적합한 방법입니다.

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>
— 지목
소스
1

다음과 같이 패딩하고 오프셋하면 :

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

텍스트 영역의 우측 완벽한 컨테이너의 우측에 정렬, 및 완벽한 컨테이너의 본문과 텍스트 영역 가지런 내부 또는 텍스트 및 텍스트 영역의 왼쪽 비트를 '돌출'. 때로는 더 예쁘다.

— 평원
소스
1

Bootstrap을 사용하는 사람들에게 textarea.form-control은 textarea 크기 조정 문제로 이어질 수 있습니다. Chrome과 Firefox는 다음 Bootstrap CSS에서 다른 높이를 사용하는 것으로 보입니다.

textarea.form-conrtol{
    height:auto;
}
— 귀여워
소스
1

나는 종종 그 문제를로 고쳤다 calc(). 텍스트 영역에 100 %의 너비와 특정 양의 패딩을 제공하지만 텍스트 영역에 부여한 100 % 너비의 총 왼쪽 및 오른쪽 패딩을 빼야합니다.

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

또는 텍스트 영역에 테두리를 제공하려는 경우 :

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}
— 제론 벨 맨스
소스
0

마이너스 마진은 어떻습니까?

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}
— Meustrus
소스
0 

* {
    box-sizing: border-box;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}
<div class="container">
  <div class="row">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name..">
  </div>
  <div class="row">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">UK</option>
      <option value="canada">USA</option>
      <option value="usa">RU</option>
    </select>
  </div>    
  <div class="row">
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
  </div>
</div>
스 니펫 확장

— 사전 사랑
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.