获取HTML textarea控件以扩展到容器的宽度 [英] Getting HTML textarea controls to expand to width of container

问题描述

我希望我的textarea控件遵循标准块显示布局行为，以便它们展开为包含父级的宽度。简单地设置 display：block; 不会这样做 - 它们默认使用某个默认值。设置 width：100％; 不起作用，因为控件中的任何填充都意味着它们会溢出容器边界。

HTML：
$ b

 < div class ='container'> 
< div>测试< / div> 
< / div> 
< div class ='container'> 
< textarea>测试< / textarea> 
< / div> 
  

CSS： p>

  .container {
 width：300px; 
 border：black solid 1px; 
 margin：10px; 
} 
 .container> div {
 display：block; 
 padding：10px; 
背景：红色; 
} 
 .container> textarea {
 display：block; 
 padding：10px; 
背景：红色; 
} 
  

结果：

http://jsfiddle.net/hKcjc/

解决方案

您可以使用名为box-sizing的css3属性来解决此问题： http://jsfiddle.net/QK78b/

添加以下内容：

  width：100％; 
 -webkit-box-sizing：border-box; 
 -moz-box-sizing：border-box; 
 box-sizing：border-box; 
  

请参阅 Box Sizing | CSS-Tricks 来解释这个问题，以及它如何与TextAreas相关

I want my textarea controls to follow standard block display layout behavior, so that they expand to the width of the containing parent. Simply setting display:block; won't do this- they default to some default with value. Setting width:100%; doesn't work because any padding in the controls means they spill over the container bounds.

HTML:

<div class='container'>
    <div >test</div>
</div>
<div class='container'>
    <textarea >test</textarea>
</div>​

CSS:

.container {
    width:300px;
    border:black solid 1px;
    margin:10px;
}
.container > div {
    display:block;
    padding:10px;
    background:red;
}
.container > textarea {
    display:block;
    padding:10px;
    background:red;
}

​ RESULT:

http://jsfiddle.net/hKcjc/

解决方案

You can use the css3 property called box-sizing to solve this: http://jsfiddle.net/QK78b/

Add the following:

width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; 

See Box Sizing | CSS-Tricks for an explanation of this issue and how it relates to TextAreas

这篇关于获取HTML textarea控件以扩展到容器的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！