Как сделать flexibale высоту для полосы прокрутки - PullRequest
Новая
       7

Как сделать flexibale высоту для полосы прокрутки

0 голосов
/ 31 марта 2020

У меня есть полоса прокрутки. Но я хочу иметь гибкую высоту. Так что не stati c высота.

У меня есть это: 

#roomlist {
  width: 250px;
  /* max-height: 100%; */
  max-width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -210px;
  background-color: #91c7e1;
  transition: all 0.5s cubic-bezier(0.7, 0, 0, 0.8);
  z-index: 1;
  margin-top: 70px;
  overflow-y: auto;
  height:max-content;
}

Но теперь полоса прокрутки не видна. Но если я сделаю это: 

height:800px;

Тогда это будет жестко закодировано. Я хочу больше гибкого подхода. Но как это сделать?

И это html: 

   <div id="roomlist">
            <ul id="roomlistul"></ul>
        </div>

Так что это работает: 


#roomlist {
  width: 250px;
  /* max-height: 100%; */
  max-width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -210px;
  background-color: #91c7e1;
  transition: all 0.5s cubic-bezier(0.7, 0, 0, 0.8);
  z-index: 1;
  margin-top: 70px;
  overflow-y: auto;
  height:800px;
}

Но теперь высота жестко закодирована. Что не должно быть.

В этом суть.

1 Ответ

1 голос
/ 31 марта 2020

Используйте высоту как auto, и она будет увеличиваться или уменьшаться в зависимости от содержимого, вы можете попробовать что-то вроде этого: 

#roomlist {
  width: 250px;
  /* max-height: 100%; */
  max-width: 300px;
  position: absolute;
  left: 0;
  background-color: #91c7e1;
  transition: all 0.5s cubic-bezier(0.7, 0, 0, 0.8);
  z-index: 1;
  /* overflow:y don't work unless you specify height! */
  overflow-y: auto;
  /* specify some height so that scroll can happen when content increased */
  height: 400px;
  border: 1px solid black;
}

ul {
  border-bottom: 1px solid red;
}
<div id="roomlist">
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>
  <ul>list</ul>

</div>
...