精准控制textarea尺寸
<style>.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox h1, .artBox h2 { margin: 8px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { padding: 0; background: none; }
.artBox blockquote { margin: 10px 20px; padding: 2px 15px; border-left: 3px solid skyblue; background: #e7e5e3; }
</style>
<div class="artBox">
<p>一般而言，为规范<code><textarea></code> 的尺寸，最常见的方法是给它一个父元素，父元素设置宽高，多行文本框使用100%宽高值。 </p>
<blockquote>
<p><code><textarea></code> 元素用于创建多行纯文本输入控件，常用做Web页内嵌文本编辑器，也常用于评论、反馈等需要大量文字输入的场景。它支持多种属性来控制外观、行为和验证规则。</p>
</blockquote>
<p>试看如下代码：</p>
<pre><code class="txtBox"><style>
.outerDiv {
margin: 20px auto;
width: 640px;
height: 360px;
border: 1pxsolid red; /* 观察边界之用 */
}
.outerDiv textarea {
width: 100%;
height: 100%;
/* 下面是核心 : 让文本框宽高严格等于父元素的宽高（后同）*/
<span title="点击编辑此行" style="padding: 4px; background: #aaa" contenteditable>/* box-sizing: border-box; */</span>
}
</style>
<div class="outerDiv">
<textarea></textarea>
</div></code></pre>
<p><button>点击查看效果</button></p>
<div class="showBox"></div>
<p>观察运行效果会发现：多行文本框右、下超越了父元素的边界。这是因为，<code><textarea></code> 元素默认的 <code>box-sizing</code> 属性值为 <code>content-box</code>，解开 <code>border-box</code> 便可可改变这种状况（可以在线操作）。</p>
<blockquote>
<p>box-sizing 用于定义浏览器如何计算元素的总宽度和高度，是控制 CSS 盒模型行为的核心属性。默认情况下（content-box），width 和 height 仅作用于内容区域，padding 和 border 会额外增加元素的实际尺寸；而 border-box 则会将 padding 和 border 包含在设定的宽高内，更易于布局控制。</p>
</blockquote>
<p>另一种方法是利用flex弹性布局加以实现。父元素使用flex布局，多行文本框设置 flex-grow 属性值为 1 即可：</p>
<pre><code class="txtBox"><style>
.outerDiv {
display: flex;
margin: 20px auto;
width: 640px;
height: 360px;
border: 1pxsolid red; /* 观察边界之用 */
}
.outerDiv textarea {
flex-grow: 1;
box-sizing: border-box;
}
</style>
<div class="outerDiv">
<textarea></textarea>
</div></code></pre>
<p><button>点击查看效果</button></p>
<div class="showBox"></div>
<p>用grid网格布局也很简单：</p>
<pre><code class="txtBox"><style>
.outerDiv {
display: grid;
margin: 20px auto;
width: 640px;
height: 360px;
border: 1pxsolid red; /* 观察边界之用 */
}
.outerDiv textarea {
box-sizing: border-box;
}
</style>
<div class="outerDiv">
<textarea></textarea>
</div></code></pre>
<p><button>点击查看效果</button></p>
<div class="showBox"></div>
<p>☪️ 精准控制 <code><textarea></code> 的宽高不限于上述三种方法，也无需囿于上述容器包裹文本框的思路，只要一切尽在掌控中，什么实现方法都是好方法。</p>
</div>
<script>
const txtBoxes = document.querySelectorAll('.artBox .txtBox');
const buttons = document.querySelectorAll('.artBox button');
const showBoxes = document.querySelectorAll('.artBox .showBox');
buttons.forEach((button, k) => {
button.onclick = () => {
const v = button.value * 1;
button.innerText = ['点击隐藏效果', '点击查看效果'];
showBoxes.innerHTML = v === 0 ? txtBoxes.innerText : '';
button.value = v === 0 ? '1' : '0';
};
});
</script> 发现我现在就是看了也是记不住哦，老了，我这记性哎。。。。。。 其实，如果不显示文本框，也就看不到谁遮盖谁了{:4_173:} 原来弹性布局和网格布局都能精准控制 <textarea> 的宽高，学习了{:4_187:} 红影 发表于 2026-3-24 22:30
其实，如果不显示文本框，也就看不到谁遮盖谁了
不显示文本框怎么输入文本？ 小辣椒 发表于 2026-3-24 21:40
发现我现在就是看了也是记不住哦，老了，我这记性哎。。。。。。
用不上记住不记住都没关系 红影 发表于 2026-3-24 22:33
原来弹性布局和网格布局都能精准控制的宽高，学习了
这两货厉害了 马黑黑 发表于 2026-3-24 23:40
不显示文本框怎么输入文本？
我是说不设置边框的线条啊{:4_173:} 马黑黑 发表于 2026-3-24 23:41
这两货厉害了
嗯嗯，知道了{:4_204:} 红影 发表于 2026-3-26 21:48
嗯嗯，知道了
{:4_190:} 红影 发表于 2026-3-26 21:47
我是说不设置边框的线条啊
这个不现实。即使不设置容器的边框，仍需要文本框与其它的元素上下、左右齐整。
页:
[1]