如何将 textarea 宽度扩展到父级的 100%（或如何将任何 HTML 元素扩展到父级宽度的 100%）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17209855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to expand textarea width to 100% of parent (or how to expand any HTML element to 100% of parent width)?
提问by Chameleon
How to expand textarea width to 100% of parent?
如何将 textarea 宽度扩展到父级的 100%？
I try width 100% but it is not works it expands to 100% of page what crash layout.
我尝试宽度 100% 但它不起作用它扩展到页面的 100% 崩溃布局。
Here the question in visual way.
这里以视觉方式提出问题。
Please provide some hints.
请提供一些提示。
采纳答案by Gangadhar
<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>
回答by Nitesh
You need to define widthof the div containing the textareaand when you declare textarea, you can then set .main > textareato have width: inherit.
您需要定义width包含 的 divtextarea并且当您声明时textarea，您可以设置.main > textarea为 have width: inherit。
Note: .main > textareameans a <textarea>inside of an element with class="main".
注意：.main > textarea表示带有<textarea>的元素内部class="main"。
Here is the working solution
这是工作解决方案
The HTML:
HTML：
<div class="wrapper">
<div class="left">left</div>
<div class="main">
<textarea name="" cols="" rows=""></textarea>
</div>
</div>
The CSS:
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;
}
回答by Broxzier
The box modelis something every web-developer should know about. working with percents for sizes and pixels for padding/margin just doesn't work. There always is a resolution at which it doesn't look good (e.g. giving a width of 90% and a padding/margin of 10px in a div with a width of under 100px).
该盒模型是每个网络开发人员应该知道。使用百分比的大小和像素的填充/边距是行不通的。总有一个分辨率看起来不太好（例如，在宽度低于 100 像素的 div 中，宽度为 90%，内边距/边距为 10 像素）。
Check this out (using micro.pravi's code): http://jsbin.com/umeduh/2
看看这个（使用 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>
The <div class="content">are there so you can use padding and margin without screwing up the floats.
在<div class="content">那里，您可以使用填充和边距而不会弄乱浮点数。
this is the most important part of the CSS:
这是 CSS 中最重要的部分：
textarea {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
回答by Qiqi Abaziz
I would do something like this:
我会做这样的事情：
HTML:
HTML：
<div class="wrapper">
<div class="side">sidebar here</div>
<div class="main">
<textarea class="taclass"></textarea>
</div>
</div><!--/ wrapper -->
CSS:
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;
}
回答by Aravind30790
HTML:
HTML：
<div id="left"></div>
<div id="content">
<textarea cols="2" rows="10" id="rules"></textarea>
</div>
CSS:
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%;
}
DEMO: HERE
演示： 这里
回答by Ganesh Rengarajan
Try this..Add this in your page
试试这个..在你的页面中添加这个
<style>
textarea
{
width:100%;
}
</style>
回答by newuser
Add the css
添加css
<style type="text/css">
textarea
{
border:1px solid #999999
width:99%;
margin:5px 0;
padding:1%;
}
</style>
