如何設置與容器相同的嵌套DIV高度？

下面請找我的代碼片段：如何設置與容器相同的嵌套DIV高度？

<table cellpadding="0" cellspacing="0" style="background-color:Aqua"> 
    <tr> 
     <td> 
      <div style="background-color:Yellow">Navigation</div> 
     </td> 
     <td> 
      Content<br />Content<br />Content<br />Content<br /> 
     </td> 
    </tr> 
</table>

我怎樣才能使<div>高度相同<td>內容的增長？我試圖設置高度= 100％或自動在<div>和<td>，但它不能解決問題。

我知道它可以通過使用jQuery/JavaScript來獲取內容的高度是固定並設置在<div>，例如：

$(".divClass").height($(".contentClass").height());

但我的內容會崩潰，汪洋根據用戶的操作，所以我在尋找更好的解決方案。該解決方案必須是IE 6兼容跨瀏覽器IE 10

來源

2013-07-04 sams5817

的[製作一個div填補餘下的屏幕空間]可能重複（http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-屏幕空間） – raam86

你想讓你的決賽桌看起來像http://jsfiddle.net/VmrBB/？ –

也是你有的jquery解決方案。當用戶執行更改佈局的操作時，可以再次調用相同的代碼（可能通過函數？）。 –

你可以用HTML/CSS直接做

<table cellpadding="0" cellspacing="0" style="background-color:Aqua"> 
    <tr> 
     <td> 
      <span style="height:100%; display:inline-block; width: 100%; background-color:Yellow"> 
       Navigation 
      </span> 
     </td> 
     <td> 
      Content<br />Content<br />Content<br />Content<br /> 
     </td> 
    </tr> 
</table>

來源

2013-07-04 10:08:07 Craig

演示 - http://jsfiddle.net/aq3JA/ – Craig

+1很好的解決方案！ –

我不知道這是IE的解決方案嗎？我試過了，它沒有按預期工作 – sams5817

嘗試使用height:inherit; :)工作對我來說:)

JsFiddle.

HTML：

<div class="foo"> 
    <div class="foo2"> 
     Foo2 
    </div> 
</div>

CSS：

.foo { 
    height: 100px; /*try changing this */ 
    background-color: yellow; /*it wont show*/ 
} 

.foo2 { 
    height: inherit; 
    background-color: green; /*it will show*/ 
}

來源

2013-07-04 10:09:46

上下文是在一個表內，雖然是一個整潔的解決方案，但在這種情況下不起作用：http://jsfiddle.net/gdR7e/ –

我指的是在td中嵌套div的解決方案，而不是在div中嵌套div – sams5817

如何設置與容器相同的嵌套DIV高度？

回答

相關問題