当 CSS 中存在填充时，如何使文本区域 100% 宽而不会溢出

我有以下CSS和HTML片段正在渲染。

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"></textarea>
</div>

问题是文本区域最终比父区域宽 8px(边框为 2px + 填充为 6px(。有没有办法继续使用边框和填充，但将textarea的总大小限制为父项的宽度？

为什么不忘记黑客，只用CSS来做呢？

我经常使用的一个：

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

请参阅此处的浏览器支持。

许多CSS格式问题的答案似乎是"添加另一个

！

那么，本着这种精神，您是否尝试过添加一个应用边框/填充的包装器div，然后将 100% 宽度的文本区域放在其中？类似的东西(未经测试(：

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}

<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

让我们考虑呈现给用户的最终输出，我们想要实现的目标：一个同时带有边框和填充的填充文本区域，其特征是单击它们会将焦点传递给我们的文本区域，以及块元素典型的自动 100% 宽度的优势。

在我看来，最好的方法是尽可能使用低级解决方案，以达到最大的浏览器支持。在这种情况下，唯一的HTML可以正常工作，避免使用Javascript(无论如何我们都喜欢(。

LABEL 标签在我们的帮助中提供，因为具有这种行为，并允许包含它必须寻址的输入元素。它的默认样式是内联元素之一，因此，为标签提供块显示样式，我们可以利用自动 100% 宽度，包括填充和边框，而内部文本区域没有边框、没有填充和 100% 宽度。

看看W3C的细节，我们可能会注意到其他优势是：

不需要"for"属性：当 LABEL 标签包含目标输入时，单击时它会自动聚焦子输入;
如果已经设计了文本区域的外部标签，则不会发生冲突，因为给定的输入可能具有一个或多个标签。

有关更多详细信息，请参阅 W3C 细节。

简单的例子：

.container { 
  width: 400px; 
  border: 3px 
  solid #f7c; 
  }
.textareaContainer {
	display: block;
	border: 3px solid #38c;
	padding: 10px;
  }
textarea { 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  border-width: 0; 
  }

<body>
<div class="container">
	I am the container
	<label class="textareaContainer">
		<textarea name="text">I am the padded textarea with a styled border...</textarea>
	</label>
</div>
</body>

.textareaContainer 元素的填充和边框是我们想要提供给文本区域的填充和边框。尝试编辑它们以根据需要设置样式。我为 .textareaContainer 元素提供了大而可见的填充和边框，让您在单击时看到它们的行为。

如果您不太在意填充的宽度，此解决方案实际上也会以百分比形式保持填充。

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

不完美，但你会得到一些填充，宽度加起来达到 100%，所以一切都很好

我在这里遇到了另一个非常简单的解决方案：向文本区域的容器添加右填充。这样可以将边距、边框和填充保留在文本区域上，从而避免了 Beck 指出的关于 chrome 和 safari 在文本区域周围放置的焦点突出显示的问题。

容器

的右填充应该是文本区域两侧的有效边距、边框和填充的总和，以及您可能希望容器使用的任何填充。因此，对于原始问题中的情况：

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}

<div class="textareacontainer">
    <textarea></textarea>
</div>

这个表黑客代码在IE8+的所有浏览器中都对我有用

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>

问题出在box-sizing属性上。默认情况下，box-sizing属性的初始值为 content-box 。所以你在引擎盖下有这样的东西：

textarea {
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
  box-sizing: content-box;
}

box-sizing: content-box;表示实际元素的宽度等于元素内容框的宽度。因此，当您添加填充(在本例中为右填充和左填充 -->，因为我们谈论的是宽度(和边框(在本例中为右边框和左边框 -->，因为我们谈论的是宽度(，这些值将添加到最终宽度中。所以你的元素会比你想要的更宽。

将其设置为 box-sizing: border-box; . 所以宽度将按如下方式计算：

horizontal border + horizontal padding + width of content box = width

在这种情况下，当您添加水平边框和水平填充时，元素的最终宽度不会改变，实际上，内容框会缩小以满足公式。

我一直在寻找内联样式解决方案而不是 CSS 解决方案，这是我能选择的响应式文本区域的最佳方法：

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>

您可以使用 box-size 属性，所有主要的符合标准的浏览器和 IE8+ 都支持它。不过，您仍然需要IE7的解决方法。在此处阅读更多内容。

不，你不能用CSS做到这一点。这就是Microsoft最初推出另一种，也许更实用的盒子模型的原因。最终获胜的盒子模型使得混合百分比和单位变得不切实际。

我认为您也可以以父级的百分比表示填充和边框宽度。

如果你像这样填充和偏移它：

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

文本区域的右侧与容器

的右侧完美对齐，文本区域内的文本与容器中的正文文本完美对齐......文本区域的左侧"突出"了一点。它有时更漂亮。

对于使用 Bootstrap 的用户，textarea.form-control 也可能导致 textarea 大小调整问题。Chrome 和 Firefox 似乎在以下 Bootstrap CSS 中使用了不同的高度：

textarea.form-conrtol{
    height:auto;
}

我经常用calc()解决这个问题。您只需为文本区域提供 100% 的宽度和一定数量的填充，但您必须减去您赋予文本区域的 100% 宽度的左右填充总和：

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

或者，如果要为文本区域指定边框：

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}

负

边距怎么样？

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}

填充的值可以发挥作用。使用您发布的样式：

textarea {
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}

宽度已经填满，您向左填充，向右填充为 3px。所以会有溢出。

如果将样式更改为：

textarea
{
  border:1px solid #999999;
  width:98%;
  margin:5px 0;
  padding: 3px 1%;
}

我现在的样式是它的宽度为 98%，剩下的 2% 完成 100%，这就是为什么我给左边填充 1%，右边填充 1%。有了这个，应该可以解决溢出问题

相关内容

最新更新

热门标签：