Горизонтальная полоса прокрутки CSS не отображается, или пустое место справа

103
12

Мне нужна горизонтальная полоса прокрутки для показа на моем веб-сайте, когда я делаю окно браузера меньше. Когда я помещаю {overflow-x:auto;} я получаю полосу прокрутки мгновенно, даже когда браузер максимизирован, и я получаю как 100 пикселей пустого пространства моего тела с правой стороны.

body {
padding: 0;
margin: 0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
}

спросил(а) 2021-01-19T14:38:09+03:00 9 месяцев, 1 неделя назад
1
Решение
112

Если вы хотите показывать полосы прокрутки только тогда, когда это необходимо, вам нужно использовать переполнение: auto, для получения дополнительной информации, пожалуйста, посмотрите здесь.

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

Проблема заключается в дочерних элементах div # navbar. И как вы используете свойства margin и padding. Для получения информации о том, как их использовать, смотрите здесь.

Элемент div # ctu имеет свойство margin-left active, которое расширяет элемент за пределами его унаследованных размеров.

#ctu{
margin-left:20px --> padding-left:20px;
}
#ft{
position:absolute; ---> position:relative;
padding-left:10px --> padding-left:0px;
}
.container{
overflow-y: scroll; ---> overflow-y:auto;
overflow-x: hidden !important; overflow-y:auto;
//OR
overflow:auto;
}

ответил(а) 2021-01-19T14:38:09+03:00 9 месяцев, 1 неделя назад
46

Попытайтесь использовать это

body {
padding:0;
margin:0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y:scroll;
margin-right: -10px;
overflow-x:hidden;
} '

Если вы все еще сталкиваетесь с какой-либо проблемой. Можете ли вы поделиться ссылкой на скрипку, где я могу проверить и предоставить вам более точное решение.

ответил(а) 2021-01-19T14:38:09+03:00 9 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема