如何讓孩子DIV繼承父DIV高度

我看到很多類似的問題，但我找不到符合我所需要的東西。如何讓孩子DIV繼承父DIV高度

我想紅色框的高度拉伸100％，基本上繼承父行的高度。

我試着擺弄jquery命令一段時間，但我沒有太多的運氣。以下是代碼。謝謝！

<!DOCTYPE html> 
<html> 
<head> 

    <script src="http://code.jquery.com/jquery-1.4.4.js"> 
    $(document).ready(function() { 

     $("div.grid_leftcol").css("height", $(this).parent().innerHeight()); 
     //This syntax probably doesn't make any sense, but it might give you a sense of what I'm trying to do 

     $("div.grid_leftcol").css("height", $("div.grid_leftcol").parent().innerHeight()); 
     //This one kind of works, but the height of the red boxes are all the same. 
    }); 
    </script> 
    <style> 
    .grid_row { 
    border-bottom:1px solid #aaa 
    } 
    .grid_rightcol_rxrow div { display:inline-block} 
    .grid_rightcol_rxrow div.grid_commentbox { display:block } 
    </style> 
</head> 
<body> 
<div id="container" style="height:485px"> 
     <div class="grid_row" style="background-color:#dde2e7" id="testrow"> 
      <div class="grid_leftcol" id="testcol" style="display:inline-block; width:225px; background-color:red; vertical-align:top"> 
      <div>Variable height content</div> 
      </div> 
      <div class="grid_rightcol" style="display:inline-block;"> 
      <div class="grid_rightcol_rxrow"> 
       <div style="width:22px"> 
        <input type="checkbox" name="baba" value="checkbox"> 
       </div> 
       <div style="width:110px">Row 1a</div> 
       <div style="width:110px">(OC)</div> 
       <div>John</div> 
      </div> 
      <div class="grid_rightcol_rxrow"> 
       <div style="width:22px"> 
        <input type="checkbox" name="baba" value="checkbox"> 
       </div> 
       <div style="width:110px">Row 1b</div> 
       <div style="width:110px">(OC)</div> 
       <div>Mary</div> 
       <div class="grid_commentbox" style="padding:3px 3px 3px 25px">This is where comment goes</div> 
      </div> 
      <div class="grid_rightcol_rxrow"> 
       <div style="width:22px"> 
        <input type="checkbox" name="baba" value="checkbox"> 
       </div> 
       <div style="width:110px">Row 1c</div> 
       <div style="width:110px">(OC)</div> 
       <div>Larry</div> 
      </div> 
      </div> 
     </div> 
     <div class="grid_row" style="background-color:#dde2e7"> 
      <div class="grid_leftcol" style="display:inline-block; width:225px; background-color:red; vertical-align:top"> 
      <div>Variable height content<br> 
      Variable height content<br> 
      Variable height content</div> 
      </div> 
      <div class="grid_rightcol" style="display:inline-block;"> 
      <div class="grid_rightcol_rxrow"> 
       <div style="width:22px"> 
        <input type="checkbox" name="baba" value="checkbox"> 
       </div> 
       <div style="width:110px">Row 2a</div> 
       <div style="width:110px">(OC)</div> 
       <div>Jen</div> 
      </div> 

      </div> 
     </div> 

     <div class="grid_row" style="background-color:#dde2e7"> 
      <div class="grid_leftcol" style="display:inline-block; width:225px; background-color:red; vertical-align:top"> 
      <div>Variable height content</div> 
      </div> 
      <div class="grid_rightcol" style="display:inline-block;"> 
      <div class="grid_rightcol_rxrow"> 
       <div style="width:22px"> 
        <input type="checkbox" name="baba" value="checkbox"> 
       </div> 
       <div style="width:110px">Row 3a</div> 
       <div style="width:110px">(OC)</div> 
       <div>Geroge</div> 
      </div> 
<div class="grid_rightcol_rxrow"> 
       <div style="width:22px"> 
        <input type="checkbox" name="baba" value="checkbox"> 
       </div> 
       <div style="width:110px">Row 3b</div> 
       <div style="width:110px">(OC)</div> 
       <div>Robert</div> 
      </div> 
      </div> 
     </div> 
</div> 
</body> 
</html>

來源

2011-01-24 Jung Lee

如果你可以使用一張表（儘管我沒有在年齡上編碼一張表），這看起來好像是一個完美的候選人。作爲一個例子，我重構了代碼http://jsfiddle.net/brianflanagan/4NXzg/。

來源

2011-01-27 19:50:46

非常感謝您對此進行調查。我同意100％，這對桌子更容易。而這實際上是在幾年前使用表格進行編碼的。但是我想看看使用非表格方法會遇到什麼樣的問題。 – 2011-01-28 04:56:02

如何讓孩子DIV繼承父DIV高度

回答

相關問題