Я видел много похожих вопросов, заданных ранее, но я не смог найти тот, который соответствовал бы тому, что я искал.
Я бы хотел, чтобы высота красных полей растягивалась на 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>