Как добавить полосы прокрутки в мой HTML, которые исчезают, если содержание меньше, чем предел
-
04-07-2019 - |
Вопрос
Я пытаюсь создать форму с расширяемым виджетом. Проблема в том, что когда виджет открыт, форма выходит за пределы поля для содержимого и выглядит плохо.
Я попытался использовать overflow: scroll
, но он создает 2 уродливые полосы прокрутки, которые не исчезают, даже если содержимое меньше, чем поле содержимого. Мне нужна только одна вертикальная полоса прокрутки.
Visual Studio также предупредила, что переполнение-y недоступно в CSS.
Решение
Измените переполнение на auto
и определите высоту и / или ширину элемента.
Другие советы
overflow-x
и overflow-y
являются частью предложения CSS3 и работают во всех текущих версиях больших четырех браузеров.
Я обычно делаю:
overflow: auto;
overflow-x: auto;
overflow-y: auto;
Причина в том, что иногда браузеры воспринимают overflow: auto
как overflow: scroll
(две некрасивые полосы прокрутки), как только содержимое переполняется в одном направлении, но эти браузеры уже поддерживают overflow-x
и overflow-y
, которые имеют приоритет.
Свилиамс дал хороший ответ о том, как лечить этот симптом. Но, возможно, вы захотите подумать и об основной причине - если поле содержимого не ограничено фиксированным размером, оно может уменьшаться и / или расширяться, чтобы соответствовать форме любого размера, без полос прокрутки. Веб-страницы являются гибкими по своему дизайну и пытаются "исправить" эта гибкость обычно в конечном итоге сталкивается с проблемами такого рода.