如何將滾動條設置為僅在一個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