Si hemos proporcionado un documento HTML que contiene el elemento <textarea> y su elemento principal contiene algo de relleno, entonces cómo hacer que el ancho del área de texto sea del 100%. contiene el área de texto.
La idea es crear un div con el nombre de clase «envoltura». Dentro de ese elemento <div>, creamos un área de texto con un cierto número de columnas y filas. En este caso, son 30 y 15 respectivamente. Después de eso, establecemos la propiedad de ancho al 100% para hacer que el ancho del área de texto sea del 100%.
Código HTML: El código HTML contiene un elemento <textarea> que contiene valores de filas y columnas.
html
<!DOCTYPE html> <html> <head> <title> How to make 100% tetxarea without overflowing when padding is present? </title> </head> <body> <div class="wrapper"> <textarea cols="30" rows="15"></textarea> </div> </body> </html>
Código CSS: el código CSS contiene la clase contenedora que contiene las propiedades de relleno, margen y color de fondo. El elemento textarea contiene la propiedad de ancho.
CSS
<style>
.wrapper {
padding: 20px;
margin:15px 0;
background-color: #0f9d58;
}
textarea {
font-size:20px;
width:100%;
}
</style>
Código completo: en esta sección, combinaremos las dos secciones anteriores para hacer que el ancho del elemento <textarea> sea del 100 % sin desbordarse cuando haya relleno.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to make 100% tetxarea
without overflowing when
padding is present?
</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>
Producción:
