如何让子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>
I saw many similar questions asked before, but I couldn't one that matched what I'm looking for.
I would like the height of the red boxes to stretch 100%, essentially inheriting the parent row's height.
I tried fiddling with jquery commands for awhile, but I haven't had much luck. Below is the code. Thanks!
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您可以使用一张表格（尽管我已经很久没有编写表格了），那么这看起来将是一个完美的候选者。我重构了您的代码 http://jsfiddle.net/brianflanagan/4NXzg/ 作为示例。
If you can use a table (and even though I haven't coded one in ages), this looks like it would be a perfect candidate. I refactored your code http://jsfiddle.net/brianflanagan/4NXzg/ as an example.