100 % 너비의 Textarea는 컨테이너를 채우지 만 100 % 너비의 div는 부모를 확장합니다.

Question

나는 누군가가 도울 수있는 흥미로운 문제가 있습니다. 그러나 100 % 너비로 설정하면 부모 div가 채워지는 textarea가 있습니다. 그러나 div로 바꾸면 div가 부모 div로 바뀌어 이제는 래핑 대신 자식의 내용에 맞게 조정됩니다.

다양한 방법 (디스플레이 : 인라인 블록, 디스플레이 : 표, 디스플레이 : 표 셀, 상자 크기 ...)을 사용해 보았습니다. span, div, p 및 table/tr/td를 사용했습니다. 모두 다음 오버플로가 발생합니다. 내가 볼 나는 소스를 검사 한

, 그리고 모든 텍스트 영역의 폭이 영향을 미치는 다른 스타일을 100 %로 설정되어있다.

검사 할 때 실종되는 속성이 있습니까?

이

*{ box-sizing: border-box; } 

Answer 1

내 생각 엔 당신이 단순히 border box을 활용할 필요가있다. 이제 width: 100%으로 채우기를 추가하면 자식은 기본적으로 여분의 채우기의 부모 원인을 오버플로합니다.

너비 내에 패딩을 포함 시키려면 div을 box-sizing: border-box;으로 사용해보십시오.

box-sizing here에 대한 자세한 내용을 볼 수 있습니다.

Answer 2

기본적으로, 당신의 div도 padding가있을 수 있습니다 :

Answer 3

응용 프로그램의 복잡성으로 인해 필자는 기본 사항까지 설명하고 이해해야합니다. 내가 알지 못했던 텍스트 영역의 구조적 구성 요소가 있기를 바랬습니다.

감사합니다.