Question

我正在为我们的一个OCD产品所有者做一个'快速'css修复，我有一个高度为500px的表，它显示从无行到数千的任何内容，溢出设置为滚动，所以你可以向下滚动物品清单。

每个行/项的初始高度为* 26px，但不会截断信息 - PO不希望截断。因此，高度实际上取决于描述的大小或您希望应用的详细程度。

在初始页面加载时，如果有一行或两行高于其邻居，则行项目不会在表格中齐平。（你可以想象，当桌子没有齐平时，OCD内部会发生什么事情）

我能看到自己做到这一点的唯一方法就是使用一些JS / jQuery将表高度设置为第一个说出20个孩子的高度 - 因为高度取决于有多少行/温度你喝过的啤酒的日期/数量

这样的事情：

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

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

在我做一些愚蠢和复杂的事情之前，我希望有更好的方法来做到这一点？我在这里使用jQuery的预订是#table_name是很多疯狂咖啡脚本的钩子，我担心它会以某种方式发生冲突。

这是表格的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行并获得高峰。您的选择器不应该“冲突”，除非其他东西在您的包装器上设置高度。你没有设置任何听众或任何东西。时间可能存在问题;我看到你有spinner CSS - 这需要在填充内容后发生。

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

Search

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

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

1 个答案: