css - 最大高度：100％在textarea上不起作用

我有一个div，它由一个标题，textarea和一个页脚组成。页眉和页脚与内容一样大，textarea占据了剩余的空间。 textarea的max-height为100％，因为textarea的高度不应超过100％。但是，如果您调整textarea的大小，textarea会获得高于父级的100％。如何防止这一点？css - 最大高度：100％在textarea上不起作用

代码：http://jsfiddle.net/FC7eY/1650/

总结：

所有元件的高度之和必须为100％
的textarea-wrapper div的高度应totalHeight(100%) - headerHeight - footerHeight
头和页脚不得有固定的高度，它们应该与其内容一样大。
父/包装div的高度必须在80％和宽度必须为350像素

来源

2016-12-24 UUioP

既然你有高度的100％，为每一个家长，你的内容将根据孩子的身高动态增长;在这种情况下，textarea。它正在做你告诉它要做的事情:) –

你能更清楚地解释一下你是如何得到输出的吗 – Geeky

@Geeky当然，我在我的问题中增加了一个总结。我希望现在都清楚。 – UUioP

如果你想看到那些在相同的屏幕尺寸，你可以使用CSS计算为文本区域的高度和宽度。您可以使用显示表格和表格行来查看任何屏幕尺寸的所有元素，以及您可以使用teaxarea div中的高度计算功能作为高度，并从之类的东西中删除页眉和页脚高度**检查更新Updated Fiddle请参阅CSS的部分

UPDATE：现在第二个DIV将剩余的高度和宽度，文本区域不会溢出水平

html, 
 
body, 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.wrap { 
 
    width: 350px; 
 
    height: 80%; 
 
    display: table; 
 
    border: 3px solid magenta; 
 
} 
 

 
.wrap > div { 
 
    background: red; 
 
    display: table-row; 
 
    height: 0; 
 
} 
 

 
#textarea-wrapper { 
 
    background: pink; 
 
    height: auto; 
 
} 
 

 
#text { 
 
    max-width: calc(350px - 3px); 
 
    max-height:100%; 
 
}

<div class="wrap"> 
 
<div id="header">Header<br>Header<br>Header<br>Header<br>Header<br></div> 
 
<div id="textarea-wrapper"> 
 
    <textarea id="text"></textarea> 
 
</div> 
 
<div id="footer">Footer<br>Footer<br>Footer<br>Footer<br></div> 
 
</div>

来源

2016-12-24 23:03:09

我的页眉和页脚没有固定的高度。他们应该和他们的内容一样高。 – UUioP

然后在textarea＃text {max-height：100％;然后尝试max和min width heigth 100％。最大宽度：100％;} –

@UUioP查看更新。也许它会帮助你。 :) –

css - 最大高度：100％在textarea上不起作用

回答

相关问题