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

I have designed a box in which the right side can grow vertically and I want the left side, which contains two elements one above the other one, to grow equally with it. After much struggling I have come up with a solution which I'm not sure is optimal.

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

Here is the box: http://i.imgur.com/Hq2OrwN.png.

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

Here is the solution I've come up with:

这是我提出的解决方案:

<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);
});

See it here: http://jsfiddle.net/joshmweinstein/2wjmj5nm/

在这里看到:http://jsfiddle.net/joshmweinstein/2wjmj5nm/

I've already seen one shortcoming which is that this solution does not allow for dynamic resizing of the page. But that is not an issue I am concerned with at the moment.

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

One of the things I'm worried about is page performance. It is a very short js, but the box will be rendered 20-30 times on each page.

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

Criticism and feedback are requested. Thanks.

要求提出批评和反馈。谢谢。

1 个解决方案

#1

Instead of jQuery you can use css

而不是jQuery你可以使用CSS

height:calc(100% / 2);

.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;
}

<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>

1 个解决方案

#1

更多相关文章

随机推荐