javascript - 将 CSS 表格高度设置为 x 行高组合数

Question

我正在为我们的一位 OCD 产品所有者做一个“快速”CSS 修复，我有一个高度为 500 像素的表格，它显示从无行到数千行的任何内容，溢出设置为滚动，因此您可以向下滚动元素列表。

每行/元素的初始高度为 *26px，但它不会 chop 信息 - PO 不希望 chop 。因此，高度实际上取决于描述的大小或您希望应用多少细节。

在初始页面加载时，如果有一两行比其相邻行高，则行元素不会在表格内齐平。 (你可以想象当 table 不齐平时，强制症患者的内心会发生什么)

我能看到自己做对的唯一方法是使用一些 JS/jQuery 将表格高度设置为其子项高度的第一个 20 - 因为高度会根据有多少行/温度而变化您喝过的啤酒的日期/数量

像这样:

$(document).ready(function(){
  $("#push_state_container").height( $(".list_box").height() + 50);
});

这应该将外部容器的高度设置为包含所有元素的 div 的高度加上 50px。只有我需要找到 .list_box 中的前 20 个元素的高度，找到它们的高度并向其添加 50px。

在我做一些愚蠢而复杂的事情之前，我希望有更好的方法来做这件事？我在这里使用 jQuery 的保留意见是 #table_name 是许多疯狂 CoffeeScript 的钩子(Hook)，我担心它会以某种方式发生冲突。

---

这是表格的 CSS

#push_state_container {
  height: 500px;
  width: 1116px;
  position: relative;
  border: 1px solid #ccc;
  > div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -webkit-transition: left 0.8s ease;
    -moz-transition: left 0.8s ease;
    -ms-transition: left 0.8s ease;
    -o-transition: left 0.8s ease;
    transition: left 0.8s ease;
    .loading {
      text-align: center;
      padding-top: 180px;
      font-size: 150%;
      color: #666 ;
      background: url(/assets/spinner.gif) no-repeat 490px 183px;
    }
    .container {
      position: relative;
      height: 100%;
      .list_box_header {
        border-width: 0 0 1px 0;
      }
      .list_box {
        border-width: 1px 0 0 0;
        height: 450px;
        > div:nth-child(even) {
          background: #eef8ff;
        }
        > div.hovered_item:nth-child(even) {
          background: #ccc;
        }
        .selected_item {
          background: #fff;
          color: #111;
          &.hovered_item {
            background-color: #ddd;
          }
        }
      }
      .bottom_links, .bottom_buttons {
        position: absolute;
        display: block;
        height: 2.2em;
        background: #eee;
        background: rgba(238, 238, 238, 0.95);
        border-top: 1px solid #ddd;
        width: 100%;
        bottom: 0;
        left: 0;
      }
      .bottom_buttons {
        height: 2.3em;
        padding: 0.2em 0 0.2em 0.5em;
        div.text, a.undo {
          display: inline-block;
        }
      }
    }
  }
  .right.float_above {
    position: absolute;
    top: -2em;
    right: 0;
    a {
      font-weight: normal;
      font-size: 80%;
    }
  }
}

#push_state_container 是外部表格，高度固定为 500px，.list_box 是包含所有行元素的 div，高度设置为 450px ，如您所见，颜色是第 n 个子偶数元素。

我希望有办法做到这一点 JSFiddle

考虑到有不确定数量的元素，而不仅仅是一个。

Answer 1

您可以遍历前 20 行并获取它们的高度。你的选择器不应该“冲突”，除非其他东西在你的包装上设置了高度。您没有设置任何听众或任何东西。时间可能有问题；我看到您有微调器 CSS - 这需要在填充内容后发生。

请看下面的演示。请注意，HTML 和 CSS 仅用于演示。

(function() {
  var heights = 0,
      $rows = $("table.scrolling tr"),
      len = $rows.length,
      NUMBER_ROWS_TO_SHOW = 10;
  
  for(var i = 0; i < NUMBER_ROWS_TO_SHOW && i < len; i++) {
    heights += $rows.eq(i).height();
  }
  
  $rows.closest('.wrapper').height(heights);
}());

body {
  font-family: sans-serif;
  font-size: 12px;
  line-height: 1.5;
}
table {
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
  min-height: 18px; /* one line of text */
  padding: 5px 10px;
  text-align: top;
}
td:first-child,
td:last-child {
  white-space: nowrap; /* To get the wrapping happening in the middle row */
}
.wrapper {
  height: 190px; /* assuming all rows are 1 line, show first 10 rows */
  overflow-y: auto;
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <table class="scrolling">
    <tr>
      <td>Condimentum</td>
      <td>suspendisse eleifend suspendisse commodo iaculis</td>
      <td>elementum parturient</td>
    </tr>
    <tr>
      <td>a cum nulla</td>
      <td>inceptos integer platea nam vel nullam volutpat parturient habitant litora consectetur. Taciti eros potenti adipiscing a a mi augue auctor rhoncus feugiat fringilla nulla maecenas ipsum vestibulum eget</td>
      <td>cubilia a consectetu</td>
    </tr>
    <tr>
      <td>eu parturient.</td>
      <td>condimentum posuere integer in nam orci a phasellus a nisi. Praesent</td>
      <td>sed aptent a enim</td>
    </tr>
    <tr>
      <td>rhoncus nisi parturient</td>
      <td>Quisque at parturient nec mauris odio vestibulum montes a risus aliquam consectetur quam integer id elit. Parturient non egestas sagittis eget eleifend adipiscing parturient blandit aptent adipiscing quis egestas condimentum adipiscing facilisi
        nam. Bibendum ridiculus parturient laoreet mi vivamus senectus consectetur</td>
      <td>nascetur rhoncus</td>
    </tr>
    <tr>
      <td>imperdiet semper</td>
      <td>a eu et quis nibh arcu natoque dui dapibus. A condimentum at</td>
      <td>lacus nostra sem molestie</td>
    </tr>
    <tr>
      <td>ullamcorper dis nullam torquent</td>
      <td>nisi parturient. Gravida dolor hac phasellus euismod dictum</td>
      <td>eleifend commodo parturient</td>
    </tr>
    <tr>
      <td>dictumst pharetra parturient enim potenti natoque et.</td>
      <td>Inceptos aptent varius convallis non magnis dignissim pulvinar</td>
      <td>vestibulum</td>
    </tr>
    <tr>
      <td>scelerisque tellus</td>
      <td>Neque orci curabitur consectetur justo taciti adipiscing id elementum</td>
      <td>ullamcorper ad mus</td>
    </tr>
    <tr>
      <td>facilisi ac. Felis venenatis</td>
      <td>vestibulum tincidunt pharetra euismod natoque et in risus.</td>
      <td>Litora auctor
      </td>
    </tr>
    <tr>
      <td>elit a suspendisse</td>
      <td>himenaeos est orci hac a malesuada a urna sed vehicula a a magna vestibulum a</td>
      <td>hac diam.</td>
    </tr>
    <tr>
      <td>dolor quis aptent</td>
      <td>Consectetur porttitor diam euismod fringilla nisl donec a a vestibulum</td>
      <td>egestas tellus</td>
    </tr>
    <tr>
      <td>Vestibulum velit</td>
      <td>tincidunt elit facilisis donec et est. Consequat urna sagittis dis ut augue cras</td>
      <td>penatibus aliquam</td>
    </tr>
    <tr>
      <td>suspendisse ante vestibulum</td>
      <td>A scelerisque taciti a nisl ac ac a a a taciti a odio imperdiet a imperdiet id sapien.</td>
      <td>Vestibulum est est</td>
    </tr>
    <tr>
      <td>Fermentum rutrum auctor</td>
      <td>ac consequat sem ad ligula suspendisse molestie euismod ac vestibulum felis. Dignissim adipiscing</td>
      <td>parturient sociis quam</td>
    </tr>
    <tr>
      <td>dictumst. Quam aliquam</td>
      <td>nibh ullamcorper etiam varius habitasse venenatis a facilisis scelerisque.</td>
      <td>Vitae ultricies sed himenaeos</td>
    </tr>
    <tr>
      <td>ultrices pretium lacus</td>
      <td>viverra aliquam parturient mattis a euismod hac eu phasellus semper. Gravida cursus diam suscipit varius</td>
      <td>lobortis inceptos dictumst</td>
    </tr>
    <tr>
      <td>purus facilisis habitant nam.</td>
      <td>Malesuada mi ornare velit mi dictumst potenti ut a scelerisque id himenaeos class enim a</td>
      <td>suspendisse habitant</td>
    </tr>
    <tr>
      <td>nisl ad a lorem adipiscing ad</td>
      <td>Feugiat lacus a et consectetur parturient lacinia nam iaculis suspendisse parturient parturient</td>
      <td>a vestibulum a vel id potenti</td>
    </tr>
  </table>
</div>

<p>Felis dis posuere lacinia etiam taciti a adipiscing pulvinar auctor consectetur neque eu commodo congue malesuada parturient ullamcorper facilisi a leo donec nisi. Eu ante habitasse a in ut parturient vestibulum aliquet vivamus facilisi maecenas non cubilia a parturient pulvinar libero nisi rhoncus taciti duis vel elit sociis. Cras ullamcorper tempor a diam a est nunc nunc scelerisque aptent sit ullamcorper blandit potenti montes a vulputate lacus vestibulum rutrum. Suspendisse parturient vestibulum at a et aptent mus nisl proin et a habitant vestibulum potenti lacinia consequat dignissim a velit in euismod parturient a. Parturient eleifend ullamcorper vivamus odio parturient vestibulum ullamcorper sociis sem adipiscing fusce ullamcorper dolor laoreet molestie libero tristique a ac vehicula turpis tempor accumsan a laoreet duis suspendisse.</p>