sourcetip

CSS에 패딩이 있을 때 어떻게 하면 텍스트 영역을 100% 너비로 넘치지 않게 만들 수 있습니까?

fileupload 2023. 8. 11. 22:30
반응형

CSS에 패딩이 있을 때 어떻게 하면 텍스트 영역을 100% 너비로 넘치지 않게 만들 수 있습니까?

저는 다음과 같은 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"></textarea>
</div>

문제는 텍스트 영역이 부모보다 8px 더 넓다는 것입니다(경계의 경우 2px + 패딩의 경우 6px).도 전체 할 수 요?textarea부모의 폭까지?

해킹은 잊어버리고 그냥 CSS로 하는 게 어때요?

내가 자주 사용하는 것:

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

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

많은 CSS 포맷 문제에 대한 답은 "다른 <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>

테두리와 패딩이 모두 있는 패딩된 텍스트 영역, 클릭하면 포커스가 텍스트 영역으로 전달되는 특징, 블록 요소의 일반적인 자동 100% 너비의 이점 등을 사용자에게 제공하는 최종 출력을 고려해 보겠습니다.

가장 좋은 방법은 브라우저 지원을 극대화하기 위해 가능한 한 낮은 수준의 솔루션을 사용하는 것입니다.이 경우 유일한 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 요소의 패딩 및 테두리는 텍스트 영역에 제공할 요소입니다.원하는 스타일로 편집해 보십시오..text areaContainer 요소를 클릭하면 해당 요소의 동작을 볼 수 있도록 크고 보이는 패딩과 테두리를 지정했습니다.

만약 여러분이 패딩의 폭에 대해 너무 걱정하지 않는다면, 이 솔루션은 실제로 패딩을 백분율로 유지할 것입니다.

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

완벽하지는 않지만 패딩이 생기고 폭이 100%까지 늘어나면 다 좋습니다.

텍스트 영역의 컨테이너에 패딩 권한을 추가하는 매우 간단한 다른 솔루션을 발견했습니다.이렇게 하면 텍스트 영역의 여백, 테두리 및 패딩이 유지되므로 크롬과 사파리가 텍스트 영역 주위에 배치한 포커스 하이라이트에 대해 벡이 지적한 문제를 피할 수 있습니다.

컨테이너의 패딩 오른쪽은 텍스트 영역 양쪽의 유효 여백, 테두리 및 패딩과 컨테이너에 대해 원하는 패딩의 합계여야 합니다.그래서, 원래 질문의 경우:

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+의 모든 브라우저에서 작동합니다.

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

는 문는다음같다니에 있습니다.box-sizing소물기. 본으의의 초기값은 적로값입니다.box-sizing은 재은입니다.content-box후드 아래에 이런 것이 있습니다.

textarea {
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
  box-sizing: content-box;
}

box-sizing: content-box;는 실제 요소의 너비가 요소의 내용 상자 너비와 같다는 것을 의미합니다. 따라서 패딩(이 경우 너비에 대해 이야기하기 때문에 패딩 오른쪽 및 패딩 왼쪽 -->)과 테두리(이 경우 너비에 대해 이야기하기 때문에 테두리 오른쪽 및 테두리 왼쪽 -->)를 추가하면 이러한 값이 최종 너비에 추가됩니다.그래서 당신의 요소는 당신이 원하는 것보다 더 넓어질 것입니다.

으로 설정합니다.box-sizing: border-box;는 다음과 같이됩니다.

horizontal border + horizontal padding + width of content box = width

이 경우 수평 테두리 및 수평 채우기를 추가할 때 요소의 최종 너비는 변경되지 않습니다. 실제로 내용 상자는 방정식을 만족시키기 위해 축소됩니다.

나는 CSS 솔루션 대신 인라인 스타일 솔루션을 찾고 있었고, 이것이 내가 대응하는 텍스트 영역에 적용할 수 있는 최선의 방법입니다.

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

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

아니요, 당신은 CSS로 그것을 할 수 없습니다.그것이 마이크로소프트가 처음에 또 다른, 어쩌면 더 실용적인 박스 모델을 소개한 이유입니다.결국 승리한 박스 모델은 백분율과 단위를 혼합하는 것을 실용적으로 만들지 못합니다.

저는 당신이 패딩과 테두리 폭을 부모의 비율로 표현하는 것이 괜찮다고 생각하지 않습니다.

다음과 같이 패드를 넣고 오프셋을 지정할 수 있습니다.

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

텍스트 영역의 오른쪽이 컨테이너의 오른쪽과 완벽하게 정렬되고, 텍스트 영역 내부의 텍스트가 컨테이너의 본문 텍스트와 완벽하게 정렬됩니다.그리고 텍스트의 왼쪽 부분은 약간 '발목'입니다.가끔은 그게 더 예뻐요.

부트스트랩을 사용하는 사용자의 경우 textarea.form-control로 인해 텍스트 영역 크기 조정 문제가 발생할 수도 있습니다.Chrome과 Firefox는 다음 부트스트랩 CSS에서 서로 다른 높이를 사용하는 것으로 나타납니다.

textarea.form-conrtol{
    height:auto;
}

저는 종종 그 문제를 고칩니다.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; 
}

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

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

패딩의 값에는 역할이 있습니다.게시한 스타일 사용:

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

너비는 이미 꽉 찼고 패딩이 남아있어 오른쪽이 3px입니다.x입니다.그래서 넘쳐날 것입니다.

스타일을 다음으로 변경하는 경우:

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

제 스타일링은 지금 98%의 폭과 100%를 완성하기 위한 나머지 2%의 폭을 가지고 있기 때문에 패딩 왼쪽 1%, 패딩 오른쪽 1%를 주었습니다.이것으로 오버플로 문제를 해결해야 합니다.

언급URL : https://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present

반응형

'sourcetip' 카테고리의 다른 글

잡립과 피클의 다른 사용 사례는 무엇입니까?  (0) 2023.08.11
Android, TextView의 너비를 제한하는 방법(텍스트 끝에 점 3개 추가)?  (0) 2023.08.11
Android APK의 패키지 이름 읽기  (0) 2023.08.06
다음 ASP를 위해 무엇을 선택하시겠습니까?NET 프로젝트:웹 양식 또는 MVC?  (0) 2023.08.06
SQL WHERE 절의 IN vs OR  (0) 2023.08.06

'sourcetip'의 다른글

  • 현재글CSS에 패딩이 있을 때 어떻게 하면 텍스트 영역을 100% 너비로 넘치지 않게 만들 수 있습니까?

관련글

댓글

티스토리툴바