Как сделать детей 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%, что с таблицей это проще. И это было изначально закодировано с использованием таблицы несколько лет назад. Но я хотел посмотреть, какие проблемы я столкнулся с использованием подхода, отличного от таблицы. –

Как сделать детей DIV наследовать родительскую высоту DIV

ответ

Смежные вопросы