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上不起作用

回答

相關問題