如何将textarea宽度扩展到父级的100％（或者如何将任何HTML元素扩展到父级宽度的100％）？

如何将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

你需要定义包含textarea的div的width ，当你声明textarea ，你可以设置.main > textarea width: inherit 。

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

这是工作解决scheme

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

盒子模型是每个Web开发者都应该知道的东西。 使用百分比大小和像素填充/边距只是不起作用。 总是有一个解决scheme，看起来不好（例如宽度低于100px的宽度为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; } 

Answer 4

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

演示： 这里

Answer 5

我会做这样的事情：

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

Answer 6

试试这个..在你的页面添加这个

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

Answer 7

添加CSS

  <style type="text/css"> textarea { border:1px solid #999999 width:99%; margin:5px 0; padding:1%; } </style>