存在填充时，如何使textarea 100%无溢出（） _前端开发

如果我们给出了一个包含< textarea> 元素的HTML文档, 并且其父元素包含一些填充, 那么如何使textarea的宽度达到100%。 textarea包含
这个想法是用类名" wrapper"创建一个div。在该< div> 元素内, 我们创建一个具有一定数量的列和行的文本区域。在这种情况下, 分别为30和15。之后, 我们将width属性设置为100%, 以使Textarea的宽度为100%。
【存在填充时，如何使textarea 100%无溢出（）】HTML代码：HTML代码包含一个< textarea> 元素, 该元素包含行和列的值。

< !DOCTYPE html> < html> < head> < title> How to make 100% tetxarea without overflowing when padding is pressent? < /title> < /head> < body> < div class = "wrapper"> < textarea cols = "30" rows = "15"> < /textarea> < /div> < /body> < /html>

CSS代码：CSS代码包含用于包装padding, margin和background-color属性的包装器类。 textarea元素包含width属性。

< style> .wrapper { padding : 20px ; margin : 15px 0 ; background-color : #0f9d58 ; }textarea { font-size : 20px ; width : 100% ; } < /style>

完整的代码：在本节中, 我们将结合以上两个部分, 使< tetxarea> 元素的宽度达到100%, 而在压下填充时不会溢出。

< !DOCTYPE html> < html> < head> < title> How to make 100% tetxarea without overflowing when padding is pressent? < /title> < style> .wrapper { padding: 20px; margin: 15px 0; background-color: #0f9d58; }textarea { font-size: 20px; width: 100%; } < /style> < /head> < body> < div class = "wrapper"> < textarea cols = "30" rows = "15"> < /textarea> < /div> < /body> < /html>

输出如下：