Как настроить полосу прокрутки для отображения только в одном div

Question

Как настроить полосу прокрутки для отображения только в одном div

0

Я работаю над угловым 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;  
  }
}

Но я не получаю желаемых результатов, т.е. Список просто растягивается из экрана, чтобы охватить все элементы, и я могу прокрутить всю страницу, чтобы увидеть их. Я попытался установить свойство height для всех тегов в цепочке (<tabset>, <tab> и <div>), но это не имело никакого значения. Есть ли способ выполнить то, что я имею в виду, через чистый CSS, или я вынужден сделать это через javascript?

Jovan Damjanovic 01 июль 2015, в 14:11

Источник

Теги:

html

angularjs

css

height

overflow

1 ответ

Ещё вопросы

Mauricio Moraes · Answer 1 · 2015-07-01T09-08-00.000Z

Чтобы установить процентное значение для 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: для прокрутки пропустить только навигационную панель будет намного сложнее. Я предлагаю ввести ввод перед элементом ul. Он будет иметь более удобное использование.

Такое поведение я тоже ожидал, но явная установка свойства высоты для этого div ( .listedData ) все равно ничего не изменила. Я попробовал это снова прямо сейчас, на всякий случай, и это не работает.
@JovanDamjanovic, возможно, пытается изменить свойство отображения вашего ul. (что «float: left» также может быть подозрением на странное поведение)
Пробовал играть с дисплеем, но безрезультатно. Поплавок там расположить его слева от details DIV и с моей точки зрения это не должно влиять на высоту ...