使用CSS填充高度

Question

盡管我找不到適合我的解決方案，但這是一個古老的問題。

給定DIV在表格單元格（TD）內，我想填充DIV的高度以適合TD

+-----------+
|     TD    |
|+---------+|
||   DIV   ||
|+---------+|
|           |
+-----------+

唯一的陷阱是：

• 我不想設置父TD的高度
• 我想避免使用Javascript（最好使用僅CSS解決方案）
• 保持內容可編輯DIV的可調整大小性質
• 獎勵：讓它在IE8 +中運行（跨瀏覽器解決方案）
• 獎勵：使用display：flex; -我無法解決，但看起來應該可以解決問題。

要問的問題太多了？

例：

獲取“ foo” DIV，以填充其父TD的100％高度。 我有一些工作要做，但是在DIV元素上添加了填充，則拋出了邊框（使用Opera）。

/* My Attempt: close, but the padding throws out the borders */
div{
    display:inline-block;
    height:100%;
    width:100%;
}

http://jsfiddle.net/nickg1/g5cpQ/5/

謝謝！

Answer 1

是的，根據您的條款， display:table是您的最佳解決方案。

像這樣添加css：

div{
display:table;
height: 100%;
border:1px solid red;    
}

檢查以下鏈接

現場演示

Answer 2

請嘗試以下操作：

table {
    height: 1px;
}
td {
    vertical-align: top;
    height: 100%;
}
div{
    border:1px solid red;
    padding: 2px 4px;
    box-sizing: border-box;
}

/* My Attempt: close, but the padding throws out the borders */
div{
    display:block;
    height: 100%;
}

觀看演示： http : //jsfiddle.net/audetwebdesign/AkjND/

訣竅是在桌子上指定高度，任何小的值都可以解決問題。

如果要將垂直填充應用於內部div ，則需要使用box-sizing: border-box ，它可以工作到IE8。

參考： https : //developer.mozilla.org/en-US/docs/Web/CSS/box-sizing