如何将textarea宽度扩展到父级的100%(或如何将任何HTML元素扩展到父宽度的100%)？

Question

如何将textarea宽度扩展到父级的100%？

我尝试宽度100%,但它不起作用它扩展到100%的页面崩溃布局.

这里以视觉方式提问.

请提供一些提示.

Answer 1

<div>
<div style="width:20%; float:left;">
 <p>Some Contentsssssssssss</p>
</div>
<div style="float:left;width:80%;">
 <textarea style="width:100%;"></textarea>
</div>
<div style="clear:both;"></div>
</div>
 

Answer 2

您需要定义width包含的div,textarea并在声明时textarea,您可以设置.main > textarea为width: inherit.

注意:.main > textarea表示<textarea>元素的内部class="main".

这是工作解决方案

HTML:

<div class="wrapper">
  <div class="left">left</div>
  <div class="main">
    <textarea name="" cols="" rows=""></textarea>
  </div>
</div>

CSS:

.wrapper {
  display: table;
  width: 100%;
}

.left {
  width: 20%;
  background: #cccccc;
  display: table-cell;
}

.main {
  width: 80%;
  background: gray;
  display: inline;
}

.main > textarea {
  width: inherit;
}

Answer 3

该盒模型是每个网络开发人员应该知道.使用百分比来处理填充/边距的大小和像素只是不起作用.总是存在一个看起来不太好的分辨率(例如,在宽度小于100px的div中给出90%的宽度和10px的填充/边距).

检查一下(使用micro.pravi的代码):http://jsbin.com/umeduh/2

<div id="container">
    <div class="left">
        <div class="content">
            left
        </div>
    </div>
    <div class="right">
        <div class="content">
            right
            <textarea>Check me out!</textarea>
        </div>
    </div>
</div>

在<div class="content">那里你可以使用填充和边距而不用拧紧浮子.

这是CSS最重要的部分:

textarea {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}