Question

我正在开发一个角度SPA，它应该在不同的标签中生成几个可搜索的数据列表。我以下列方式组织了它们：

    <body>
      <tabset>
        <tab>
          <div class="listedData">
            <ul>
              <li class="searchBar"></li>
              <li ng-repeat="iterateHere"></li>
            </ul>
          </div>
          <div class="dataDetails">
          </div>
        </tab>
        //... other tabs
      </tabset>    
    </body>

我希望页面占据屏幕的高度，因为数据列表可能会占用更多，我想在{}中设置一个滚动条 {1}}（最好跳过第一个元素 - <ul>），但我可以忍受。

为此目的，我已将css定义如下：

searchBar

但是我没有得到理想的结果，我只是从屏幕伸出来包住所有元素，我可以滚动整个页面来查看它们。我尝试为链中的所有标记html, body { height: 100%; width: 100%; padding: 0px; margin: 0px; } .listedData { ul { width: 15%; float: left; max-height: 95%; overflow-y: auto; } }，height和<tabset>设置<tab>属性，但它没有任何区别。有没有办法通过纯粹的CSS来实现我的想法，或者我被迫通过javascript来实现它？

Answer 1

要在ul上设置百分比值，您必须设置包装div的高度。

如果您想拥有滚动条，可以使用以下样式。我更改了html，并且示例中的一些值更清晰。

＆＃13;

html, body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.listedData {
  height: 35%;
  width: 100%;

}

.listedData ul {
  width: 20%;
  max-height: 70%;
  overflow-y: auto;  
}

＆＃13;

<body>
      <tabset>
        <tab>
          <div class="listedData">
            <ul>
              <li class="searchBar">content li 1</li>
              <li ng-repeat="iterateHere"> content li 2</li>
              <li ng-repeat="iterateHere"> content li 3</li>
              <li ng-repeat="iterateHere"> content li 4</li>
              <li ng-repeat="iterateHere"> content li 5</li>
              <li ng-repeat="iterateHere"> content li 6</li>
              <li ng-repeat="iterateHere"> content li 7</li>
              <li ng-repeat="iterateHere"> content li 8</li>              
              <li ng-repeat="iterateHere"> content li 9</li>
              
            </ul>
          </div>
          <div class="dataDetails">
          </div>
        </tab>
        //... other tabs
      </tabset>    
    </body>

＆＃13;

Obs：如果滚动只跳过seachbar，那将会困难得多。我建议在ul元素之前输入一个输入。它将具有更好的可用性。

如何将滚动条设置为仅显示在一个div中

1 个答案: