如果我们给出了一个包含<textarea>元素的HTML文档, 并且其父元素包含一些填充, 那么如何使textarea的宽度达到100%。 textarea包含
这个想法是用类名" wrapper"创建一个div。在该<div>元素内, 我们创建一个具有一定数量的列和行的文本区域。在这种情况下, 分别为30和15。之后, 我们将width属性设置为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>输出如下：
