CSS max-height и overflow auto всегда отображает вертикальную прокрутку

У меня есть класс div, настроенный со следующим стилем CSS:

div.multiple_choice{
    border: 1px solid black; 
    max-width: 300px; 
    max-height: 200px; 
    overflow: auto;
}

проблема в том, что когда текст внутри не заставляет DIV достигать максимальной высоты 200px, вертикальная полоса прокрутки все еще отображается. Я могу нажать на стрелки вверх и вниз, но он перемещает содержимое только вверх и вниз примерно на пиксель или два.

это происходит в Google Chrome (версия 18.0) и Iceweasel 11.

9
css overflow scroll

6 ответов

как оказалось, другой стиль CSS вызывал проблему:

body{
    line-height: 1;
}

любой, кто заинтересован в изучении того, как и почему это вызовет проблему, может прочитать о свойстве line-height здесь

8

я столкнулся с этой проблемой.Но я решил использовать следующий стиль css:

div.yourcontainer{overflow-y:auto;}

если контейнер был выше max-height, будет отображаться вертикальная полоса прокрутки.

6

у меня была проблема с этим, и я обнаружил, что position: relative на дочерних элементах была причиной проблемы. Очевидно, это не может быть решением для всех, особенно если position: absolute используется, но для меня это сработало.

4

я наткнулся на эту ошибку сегодня. В моем случае список дочерних элементов имел display: inline-block вместо display: block. Переключение на дисплей: блок для моего списка дочерних элементов в усеченном div исправил проблему для меня.

1

у меня также была эта проблема с использованием Bootstrap и nav. Это произошло потому, что загрузочный definds ли в Навь-вкладки, как: .nav-tabs > li { margin-bottom:-1px; }. Чтобы противодействовать этому, вы также должны сделать:

.nav-tabs > li:last-child {
   margin-bottom:0;
}

без установки последнего ребенка в следующем примере всегда будет отображаться прокрутка, независимо от того, сколько контента находится в списке:

<ul class="navs nav-tabs nav-stacked" style="max-height:80px;overflow:auto;">
  <li></li>
  ...
</ul>
0

У меня была эта проблема при попытке обернуть список (гибкий столбец) компонентов react в div, я решил ее, изменив поле элементов в каждом элементе списка на 0.

подход к устранению неполадок для меня состоял в том, чтобы проверить элементы списка (возможно, каждый <li> in OP) и посмотреть, какие стили заставляли div думать, что каждый элемент списка был больше, чем то, что было видно человеческому глазу.

вот пример проверки поля rogue на значке в списке элемент в моем проекте: Example of rogue margin

решение состоит в том, чтобы установить стиль этого значка, чтобы иметь вертикальное поле 0, хотя в моем приложении я просто сделал все поле 0 и добавил некоторые отступы.

Fixed rogue margin example

0