存在填充时如何使 textarea 100% 无溢出？ - 芒果文档

📌 相关文章

📜 存在填充时如何使 textarea 100% 无溢出？

📅 最后修改于: 2021-10-29 03:49:53 🧑 作者: Mango

如果我们给出了一个包含元素的 HTML 文档，并且它的父元素包含一些填充，那么如何将 textarea 宽度设置为 100%。文本区域包含。<br/>这个想法是创建一个类名为“wrapper”的div。在那个 <div> 元素中，我们创建了一个具有一定数量的列和行的文本区域。在这种情况下，它分别是 30 和 15。之后，我们将 width 属性设置为 100% 以使 textarea 宽度为 100%。</p> <p> <strong>HTML 代码：</strong> HTML 代码包含一个 <textarea> 元素，用于保存行和列值。</p> <div class="noIdeBtnDiv"> <div> <h5 class="code">html</h5> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><!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">

CSS

html



 

    
        How to make 100% tetxarea
        without overflowing when
        padding is pressent?

CSS 代码： CSS 代码包含包含填充、边距和背景颜色属性的包装类。 textarea 元素包含 width 属性。

CSS

完整代码：在本节中，我们将结合以上两节，使元素的宽度为 100%，并且在存在 padding 时不会溢出。</p> <div class="responsive-tabs"> <h2 class="tabtitle"> html </h2> <div class="tabcontent"> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><!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">

输出：