Проблема с полосой прокрутки в Google Chrome

Question

У меня есть следующая структура HTML

<div style="overflow-x:auto;overflow-y:hidden;position:relative">
      <div style="position:absolute; top:0;bottom:0;padding-top:30px">
      </div>
</div>

Когда внутренний div расширяется, внешняя полоса получает свои полосы прокрутки.Но полосы прокрутки появляются сверху внутреннего div (блокируя его содержимое).Прекрасно работает в Firefox и IE.

Мне нужно, чтобы внутренний div был расположен абсолютно.

Кто-нибудь, помогите, пожалуйста ..

Answer 1

Полоса прокрутки добавляется в div, а не под ним, поэтому содержимое вашей страницы не будет сдвигаться вниз или в стороны, когда div показывает полосы прокрутки. Поэтому, если вы установите высоту внешнего div равным 100 пикселям, это будет 100 пикселей с полосами прокрутки или без них.

У меня нет IE для тестирования, но я не вижу разницы в высоте в Chrome, Safari или Firefox. Хотя есть одно отличие. Chrome и Safari не изменяют размер внешнего div. Это все еще 100px в высоту, но на нижней части полосы прокрутки накладывается. Однако в Firefox размер внешнего div изменяется до 100px - высоты полосы прокрутки. Таким образом, div теперь, скажем, 90px, а полоса прокрутки 10px добавлена ​​ниже этого.

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