Question

我之前看到过许多类似的问题，但我找不到与我正在寻找的相符的问题。

我希望红色框的高度伸展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>

Answer 1

如果你可以使用一张桌子（即使我没有多年编码），这看起来就像是一个完美的候选人。我重构了您的代码http://jsfiddle.net/brianflanagan/4NXzg/作为示例。

如何让孩子DIV继承父DIV的高度

1 个答案: