DIV 高度中 Textarea 高度 100% 的百分比

Question

我可以找到如何在 DIV 宽度固定高度中获得 100% Textarea，但对于流动内容却没有。

这里是我要找的：

html, body {
    margin: 0;
    padding: 0;
    border:1px;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
    background: #F60;
}
#container {
    width: 100%;
    padding-bottom: 75px;
}
#wrap {min-height: 100%;}
#header {
    height: 100px;
    width: 100%;
    background: #069;
}
#content {
    height: 100%;
    width: 100%;
	position: relative;
}

.content textarea{
    border: 1px solid red;
    height: 100%;
	
}

#footer {
    position: relative;
    margin-top: -75px;
    clear:both;
    height: 75px;
    width: 100%;
    background: green;
}

<div id="wrap">
	<div id="container">
		<div id="header">header</div>
		<div id="content">message<br />
			<textarea>This textarea doesn't fill the content in height.</textarea>
      
		</div>
	</div>
</div>
<div id="footer">footer</div>

基本上，我需要用textarea填充内容。

这可能吗？ 提前谢谢你。

Answer 1

百分比是相对的，这意味着它取决于父值。如果您没有可以引用的值，它将无法很好地工作，假设包装器的高度为：100px，那么非常明确 100% 是 100px #cheers

Answer 2

是的，这是可能的。

• 必须先删除消息和 br 元素。 br 元素不要让你达到效果。
• 然后您已从标题容器 (div) 中删除填充。填充只是与 textarea 重叠您的内容元素。
• 带有 textarea 元素的内容元素必须具有固定高度。否则文本区域将不会填充内容div。
• 然后申请textarea元素高度100%。这意味着 textarea 将填充其父元素的整个高度。
• 然后你就可以玩代码和做实验了。 希望对您有所帮助。