Question

对于我的页面，我使用 Foundation 。伟大的工具，我喜欢它。但是我还有一件事无法实现：

如何将一行垂直可滚动？我想要实现的一个例子是 UITableView （有点）。这是示例虚拟代码：

<div class="row" id="my-row">
  <div class="row">
    <div class="large-6 columns">
      Chrome
    </div>
    <div class="large-6 columns">
      50%
    </div>
  </div>
  <div class="row">
    <div class="large-6 columns">
      Internet Explorer
    </div>
    <div class="large-6 columns">
      20%
    </div>
  </div>
  <div class="row">
    <div class="large-6 columns">
      Firefox
    </div>
    <div class="large-6 columns">
      15%
    </div>
  </div>
  <div class="row">
    <div class="large-6 columns">
      Safari
    </div>
    <div class="large-6 columns">
      7%
    </div>
  </div>
  <div class="row">
    <div class="large-6 columns">
      Others
    </div>
    <div class="large-6 columns">
      8%
    </div>
  </div>
</div>

在这个例子中我只有5行，但在生产中我最终会有数百行（对于信息：我不允许共享代码，所以我只是发布了一些代表我的代码的虚拟示例有/需要）。

为此我尝试在屏幕上为这一行（ my-row ）分配一些空间，具体取决于HTML5 localStorage 的屏幕大小。我尝试调试并正确保存和检索变量，然后我还使用以下jQuery为此行设置 max-height ：

jQuery('div[id="my-row"]').css({'max-height': $theHeight});

但是当我在 Chrome 中转到 Inspect Element 时， element.style 为空。

所以基本上我在这里有两个问题：

如何将行的高度设置为最大xxx像素（取决于localStorage）？
如果所有行都不符合指定的高度，我该如何使这一行可滚动？

Answer 1

尝试

$('#my-row').css({'max-height': $theHeight + 'px'});

或者如果你想要它也滚动：

$('#my-row').css({'max-height': $theHeight + 'px', 'overflow-y': 'auto'});

Example

Check if the height of the div is bigger

Answer 2

以下是 FIDDLE ，显示如何使用localstorage保存值并自动设置div的高度。这是在本地保存数据的持久方法之一。

此外，您需要将overflow: auto添加到CSS中，以便内容实际滚动。

使行满行可垂直滚动

2 个答案: