div不會填充td高度：100％

我知道這裏有很多關於這個問題的答案。但我似乎無法得到它。這是我的例子：div不會填充td高度：100％

看到的第一div沒有填滿td的總高度。我希望每個td中的div都填滿整個高度，無論每個文本有多少或多少文本。

我猜不清楚的是每行的高度沒有明確定義，但它是由單元格內容的最大高度定義的。

感謝幫助！

下面的代碼：

HTML：

<table> 
    <tr> 
     <td> 
      <div>text</div> 
     </td> 
     <td> 
      <div>many lines of text. More and more.</div> 
     </td> 
    </tr> 
</table>

CSS：

table { 
    width:100px 
} 
td { 
    border: 1px solid grey; 
    height: 100%; 
} 
div { 
    height: 100%; 
    border: 1px solid; 
}

來源

2014-02-23 jeffery_the_wind

可以包括代碼你的問題？我會回答:) –

該代碼是在jsfiddle示例中。但我也可以包括它。 –

是的，請做必要的，因爲如果小提琴鏈接到期，您的問題將不會對未來的訪客有用:) –

請嘗試：股利將是100％;高度。

div{ 
    height: 100%; 
    border: 1px solid; 
    display:inline-block; 
}

來源

2014-02-23 19:41:29 Marcel

就是這個，謝謝！ –

@jeffery_the_wind你必須使用Chrome瀏覽器，在Firefox上會失敗 –

可以添加顯示：內聯表;

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

http://jsfiddle.net/xyJkc/13/

來源

2014-02-23 19:37:38 Bala

不，這將改變'div'標籤的'display'模型 –

讓我們看看OP決定什麼：）如果他對此沒有問題，你不需要JS，並且你只能用CSS做，可以參考我的答案知道爲什麼會發生這種情況 –

是固定表格的高度，但是你認爲固定高度這裏是不錯的選擇？ – Bala

我想這是因爲你的div有設置爲靜態（默認）位置值。您可以通過給position:absolute;屬性爲tr修復它，或者如果你不想這樣做，你可以使用jQuery：

$(function() 
{ 
    $('div').height($('tr').height()); 
});

來源

2014-02-23 19:38:13 Fiodor

您可以在表格或tr上設置高度。然後div將填滿整個td。

例子：

tr{ 
    height: 5em; /* or px */ 
}

來源

2014-02-23 19:43:15 anders

div不會填充td高度：100％

回答

相關問題