CSS에 패딩이있을 때 넘치지 않고 Textarea 100% 너비를 어떻게 만들 수 있습니까?

StackOverflow https://stackoverflow.com/questions/271067

  •  06-07-2019
  •  | 
  •  

문제

다음 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 더 넓다 (Probing의 경우 2px + 패딩의 경우 6px)이라는 것입니다. 국경과 패딩을 계속 사용하는 방법이 있습니까? 그러나 총 크기를 제한합니다. textarea 부모의 폭에?

도움이 되었습니까?

해결책

왜 안 돼? 해킹을 잊고 CSS와 함께 하시겠습니까?

자주 사용합니다 :

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

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

다른 팁

많은 CSS 서식 문제에 대한 답은 "다른 추가"인 것 같습니다.u003Cdiv> ! "

따라서, 그 정신으로, 당신은 테두리/패딩이 적용되는 래퍼 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>

고려합시다 최종 출력 사용자에게 렌더링됩니다 우리가 달성하고자하는 것 : 테두리와 패딩이 모두있는 패딩 된 텍스토리.

제 생각에 가장 좋은 방법은 최대 브라우저 지원에 도달하기 위해 가능한 한 낮은 수준의 솔루션을 사용하는 것입니다. 이 경우 유일한 HTML은 JavaScript (어쨌든 우리 모두가 사랑하는)의 사용을 피하면서 잘 작동 할 수 있습니다.

레이블 태그는 그러한 동작이 있고 해결해야 할 입력 요소를 포함 할 수 있기 때문에 도움이됩니다. 기본 스타일은 인라인 요소 중 하나이므로 레이블에 패딩 및 테두리를 포함한 자동 100% 너비를 사용할 수있는 블록 디스플레이 스타일을 제공하는 반면 내부 TextArea에는 테두리, 패딩 및 100% 너비가 있습니다. .

W3C 세부 사항을 살펴보면 우리가 주목할 수있는 다른 장점은 다음과 같습니다.

  • ""속성의 경우 : 레이블 태그에 대상 입력이 포함 된 경우 클릭하면 하위 입력에 자동으로 초점을 맞 춥니 다.
  • Textarea의 외부 레이블이 이미 설계된 경우 주어진 입력에 하나 이상의 레이블이있을 수 있으므로 충돌이 발생하지 않습니다.

보다 W3C 세부 사항 더 자세한 정보는.

Simple example:


<html>
<head>
<style type="text/css">
.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; }
</style>
</head>



u003Cbody>u003Cdiv class="container">나는 컨테이너입니다u003Ctextarea name="text"> u003Clabel class="textareaContainer">나는 스타일의 테두리가있는 패딩 된 텍스트 주레아입니다 ...u003C/label>u003C/textarea>u003C/div>u003C/body>u003C/html>

.textAreconcontainer 요소의 패딩과 테두리는 우리가 TextRea에주고 싶은 요소입니다. 원하는대로 스타일링하도록 편집 해보십시오. 클릭 할 때 동작을 볼 수 있도록 .TextAreacontainer 요소에 크고 눈에 띄는 패딩과 경계를 주었다.

패딩의 폭에 대해 너무 귀찮게하지 않으면이 솔루션은 실제로 패딩을 백분율로 유지합니다 ..

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

완벽하지는 않지만 패딩을 얻을 수 있고 너비는 최대 100%를 추가하므로 모든 것이 좋습니다.

나는 다른 해결책을 발견했다 여기 그것은 매우 간단합니다. Textarea의 컨테이너에 Padding-right를 추가하십시오. 이것은 Textarea의 마진, 테두리 및 패딩을 유지하며, 이는 Chrome과 Safari가 TextRea를 주위에 놓은 초점 하이라이트에 대해 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>

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

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>

박스 크기 속성을 사용할 수 있으며 모든 주요 표준 호환 브라우저 및 IE8+가 지원합니다. 그래도 IE7을위한 해결 방법이 필요합니다. 더 읽으십시오 여기.

아니요, CSS로는 할 수 없습니다. 그것이 Microsoft가 처음에 다른 것을 소개했으며 아마도 더 실용적인 이유입니다. 박스 모델. 결국 우승 한 박스 모델은 비율과 단위를 혼합하는 것이 중요합니다.

나는 부모의 비율로 패딩과 테두리 너비를 표현하는 것이 괜찮다고 생각하지 않습니다.

나는 CSS 솔루션 대신 인라인 스타일링 솔루션을 찾고 있었고, 이것이 반응 형 Textarea를 위해 갈 수있는 최고입니다.

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>

당신이 이것처럼 그것을 패드하고 오프셋하는 경우 :

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

Textarea의 오른쪽은 컨테이너의 오른쪽과 완벽하게 일치하며, 그리고 Textarea 내부의 텍스트는 컨테이너의 본문 텍스트와 완벽하게 정렬됩니다 ... Textarea의 왼쪽은 약간 튀어 나옵니다. 때로는 더 예쁘다.

사용 상자 크기 부동산:

-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box;

도움이 될 것입니다

부트 스트랩을 사용하는 사람들의 경우 TextArea.form-Control은 TextArea 크기 문제로 이어질 수 있습니다. Chrome과 Firefox는 다음 부트 스트랩 CS와 함께 다른 높이를 사용하는 것으로 보입니다.

textarea.form-conrtol{
    height:auto;
}

부정적인 마진은 어떻습니까?

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

나는 종종 그 문제를 해결합니다 calc(). Textarea의 너비는 100%와 일정량의 패딩을 제공하지만 Textarea에 제공 한 100% 너비의 총 왼쪽 및 오른쪽 패딩을 빼야합니다.

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

또는 Textarea에 국경을주고 싶다면 다음과 같습니다.

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}


* {
    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>

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top