Переполнение CSS не работает должным образом и не может прокрутить до нижней части div

Question

Моя цель - создать макет с липким заголовком и левой боковой панелью, а не с липким DashboardBody (прямоугольник с зеленой рамкой), который можно прокручивать (в этом случае содержимое вверху исчезает) в«липкий заголовок).Я использую styled-компоненты, и два поля под заголовком обернуты в BelowNavContainer, который использует flexbox.

Компонент ProjectContainer охватывает весь вид (включая заголовок и боковую панель, а также).Так как мне нужна полоса прокрутки только для части DashboardBody, я установил overflow: auto для этого и overflow: hidden для ProjectContainer.Однако это приводит к тому, что пользователь не может видеть нижнюю часть DashboardBody - нижняя часть полосы прокрутки (со стрелкой, указывающей вниз) также не видна.

Если я установил overflow: auto для ProjectContainerзатем добавляется дополнительная полоса прокрутки, и я могу прокрутить до нижней части DashboardBody, используя эти 2 полосы прокрутки.Но, очевидно, мне нужна только одна полоса прокрутки.

Что я делаю не так и как я могу это исправить?

Я смотрел на связанные вопросы "переполнение не работает".Их решения не работали, так как у меня уже есть значение height.

Рабочая демонстрация: https://codesandbox.io/s/overflow-woes-i4dww

Примечание: похоже, что сам CodeSandbox добавляет полосу прокрутки к представлению, поэтомуЯ думаю, что самое внешнее можно игнорировать.С webpack-dev-server (из create-реагировать-app) на моем собственном компьютере, у меня на одну полосу прокрутки меньше, чем показывает CodeSandbox.

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

В настоящее время я не могу достичь нижней части полосы прокрутки без добавления другой полосы прокрутки.в окружающий его div, ProjectContainer.

Answer 1

Проблема с BelowNavContainer Компонентом.

Вы установили его высоту 100vh, но обратите внимание, что над ним есть заголовок, поэтому общая высота полной страницы теперь равна:

Высота заголовка + 100vh (высота BelowNavContainer).

и когда вы поместите свой родительский компонент: ProjectContainer высота на 100%, overflow: hidden, это скроет нижнюю часть компонента DashboardBody '.

Решение:

указать высоту BelowNavContainer следующим образом: height: calc(100vh - 100px)

как 100px: высота вашего заголовка

вы можете увидеть эту демонстрационную программу

Answer 2

Ваш заголовок имеет высоту 100px, а содержимое ниже имеет 100vh (означает весь экран). Если вы хотите достичь дна без использования другой полосы прокрутки, вы должны изменить высоту содержимого на: calc (100vh - 100px). Это то, что вы ищете?