两个堆叠的元素按比例增长与他们旁边的元素

Question

我设计了一个盒子，右侧可以垂直生长，我希望左侧包含两个元素，一个在另一个之上，与它同等生长。经过多次努力，我想出了一个我不确定是最优的解决方案。

这是方框：http://i.imgur.com/Hq2OrwN.png。

以下是我提出的解决方案：

<table class="equalHeight" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="2">Top Row</td>
</tr>
<tr>
    <td>
        <table class="rows" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>TOP</td>
            </tr>
            <tr>
                <td>BOTTOM</td>
            </tr>
        </table>
    </td>
    <td id="questionTxt">Question
        <br>Question
        <br>Question
        <br>Question
        <br>Question
        <br>Question
        <br>Question
        <br>Question
        <br>
    </td>
</tr>
</table>


    .equalHeight {
    border-collapse: collapse;
    width:500px;
}
.equalHeight td {
    border:1px solid #CCC;
    height: 100%
}
.rows {
    border-collapse: collapse;
    width: 100%;
}
.rows td {
    text-align: center
}

    $(document).ready(function () {
    height = $("#questionTxt").height();
    rowHeight = height / 2;

    $(".rows").css("height", height);
    $(".rows td").css("height", rowHeight);
});

请在此处查看：http://jsfiddle.net/joshmweinstein/2wjmj5nm/

我已经看到一个缺点，即此解决方案不允许动态调整页面大小。但这不是我现在关注的问题。

我担心的一件事是页面性能。这是一个非常短的js，但每个页面上的框会呈现20-30次。

要求批评和反馈。感谢。

Answer 1

您可以使用css

代替jQuery

height:calc(100% / 2);

＆＃13;

＆＃13;

.equalHeight {
  border-collapse: collapse;
  width: 500px;
  height: intrinsic;
}
.equalHeight td {
  border: 1px solid #CCC;
  height: 100%
}
.rows {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
.rows td {
  text-align: center;
  height: calc(100% / 2);
  border: 0;
}
.rows tr:first-child td {
  border-bottom: 1px solid #CCC;
}

＆＃13;

<table class="equalHeight" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2">Top Row</td>
  </tr>
  <tr>
    <td>
      <table class="rows" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>TOP</td>
        </tr>
        <tr>
          <td>BOTTOM</td>
        </tr>
      </table>
    </td>
    <td id="questionTxt">Question
      <br/>Question
      <br/>Question</td>
  </tr>
</table>
<br>
<br>
<table class="equalHeight" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2">Top Row</td>
  </tr>
  <tr>
    <td>
      <table class="rows" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>TOP</td>
        </tr>
        <tr>
          <td>BOTTOM</td>
        </tr>
      </table>
    </td>
    <td id="questionTxt">Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question</td>
  </tr>
</table>
<br>
<br>
<table class="equalHeight" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2">Top Row</td>
  </tr>
  <tr>
    <td>
      <table class="rows" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>TOP</td>
        </tr>
        <tr>
          <td>BOTTOM</td>
        </tr>
      </table>
    </td>
    <td id="questionTxt">Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question
      <br/>Question</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;