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

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>

我希望页面占据屏幕的高度，并且由于数据列表可能会占用更多的空间，因此我只想在<ul>内部设置滚动条（最好跳过第一个元素searchBar ），但我可以接受。

为此，我将css定义如下：

html, body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.listedData {
  ul {
    width: 15%;
    float: left;
    max-height: 95%;
    overflow-y: auto;  
  }
}

但是我没有得到期望的结果，即列表只是延伸到屏幕之外以包围所有元素，并且我可以滚动整个页面以查看它们。 我尝试为链中的所有标签（ <tabset> ， <tab>和<div> ）设置height属性，但没有区别。 有没有办法通过纯CSS完成我的想法，还是我被迫通过JavaScript做到了？

Answer 1

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

如果要使用滚动条，可以使用以下样式。 我为示例更改了html和一些值，以使其更加清晰。

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

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

Obs：要使滚动仅跳过seachbar，将更加困难。 我建议将输入放在ul元素之前。 它将具有更好的可用性。

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

问题描述

1 个解决方案

解决方案1
0 2015-07-01 12:06:26

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

问题描述

1 个解决方案

解决方案1 0 2015-07-01 12:06:26

解决方案1
0 2015-07-01 12:06:26