如何扩展文本区宽度为父级宽度的100% (或者如何扩展任何 HTML 元素为父级宽度的100%) ？

试试这个. . 把这个添加到你的页面

<style>
textarea
{
width:100%;
}
</style>

添加 CSS

  <style type="text/css">
textarea
{


border:1px solid #999999
width:99%;
margin:5px 0;
padding:1%;
}
</style>

我会这样做:

HTML:

<div class="wrapper">
<div class="side">sidebar here</div>
<div class="main">
<textarea class="taclass"></textarea>
</div>
</div><!--/ wrapper -->

CSS:

.wrapper{
display: block;
width: 100%;
overflow: hidden;
}
.side{
float:left;
width:20%;
}
.main{
float:right;
width:80%;
}
.taclass{
display:block;
width:100%;
padding:2%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

您需要定义包含 textarea的 div 的 width，当您声明 textarea时，您可以将 .main > textarea设置为拥有 width: inherit。

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

这是 工作解决方案

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;
}

HTML:

<div id="left"></div>
<div id="content">
<textarea cols="2" rows="10" id="rules"></textarea>
</div>

CSS:

body{
width:100%;
border:1px solid black;
border-radius:5px;


}
#left{
width:20%;
height:400px;
float:left;
border: 1px solid black;
display:block;
}
#content{
width:78%;
height:400px;
float:left;
border:1px solid black;
text-align:center;
}
textarea
{
margin-top:100px;
width:98%;
}

演示: 给你

盒子模型是每个网络开发者都应该知道的东西。使用百分比表示大小，使用像素表示填充/边距，这种方法是行不通的。总有一个分辨率看起来不好(例如给出一个宽度为90% 的 div 和一个宽度小于100px 的 div 中的空白/边距为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;
}