Задать вопрос
kotcich
@kotcich
Я скучный.
css

Как сделать прокрутку контента в div, если html, body имеют overflow-y: hidden?

Прокрутка нужна контенту и сайдбарую.
<body>
    <div id="app">
        <nav id="nav">nav</nav>
        <div id="wrapper">
            <div id="sidebar">sidebar</div>
            <div id="content">
                <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
                    стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
                    создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
                    Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в
                    электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами
                    Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus
                    PageMaker, в шаблонах которых используется Lorem Ipsum.
                </div>
                <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
                    стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник
                    создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
                    Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в
                    электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами
                    Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus
                    PageMaker, в шаблонах которых используется Lorem Ipsum.
                </div>
            </div>
        </div>
    </div>
</body>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

::-webkit-scrollbar {
    width: 0;
}

html, body {
    overflow-y: hidden;
}

html, body, #app {
    height: 100%;
    width: 100%;
}

#nav {
    width: 100%;
    height: 10%;
    min-height: 70px;
}

#wrapper {
    width: 100%;
    height: 90%;
    min-height: 500px;

    display: flex;
}

#sidebar {
    width: 25%;
    height: 100%;
    background-color: #5b1616;
}

#content {
    width: 75%;
    height: 100%;
    background-color: black;
}
  • Вопрос задан
  • 342 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@andand44
Нужен overflow: auto;
#sidebar {
    width: 25%;
    height: 100%;
    background-color: #5b1616;
    overflow: auto;
}

#content {
    width: 75%;
    height: 100%;
    background-color: black;
    overflow: auto;
}
Ответ написан
10 комментариев
10 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка алгоритма на python (Data engineering)
21 нояб. 2024, в 23:30
300000 руб./за проект
Верстка Flutter + API
21 нояб. 2024, в 22:21
3000 руб./в час
Разработать Custom Speech-to-text Operator на Apache Flink
21 нояб. 2024, в 21:42
100000 руб./за проект
Ещё заказы