Я пытаюсь создать страницу со следующим макетом:
+-------------------------------------------------------+
| |
| nav |
| |
+-------------------------------------------------------+
| |
| content that should not scroll (fixed) |
| |
+-------------------------------------------------------+
| |
| |
| Scrollable content |
| taking up remaining height |
| |
| |
| |
+-------------------------------------------------------+
Поскольку прокручиваемый контент должен занимать «оставшуюся высоту», я решил попробовать использовать display: flex, чтобы попытаться решить эту проблему.
Я добавил следующий класс ко всем элементам от прокручиваемого содержимого до первого элемента (#app):
.flex {
display: flex;
flex-direction: column;
min-height: 0;
}
Сам прокручиваемый элемент имеет дополнительное свойство CSS overflow-y: auto;.
Верхний элемент #app имеет следующие свойства, в первую очередь высоту.
#app {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
При такой настройке я обнаружил, что по мере роста прокручиваемого контента контент nav и fixed начинает продвигаться все дальше и дальше.
Что вызывает это и как это предотвратить? Мне просто нужна страница с фиксированным содержимым и элементом, занимающим оставшуюся высоту. Вот кодовый ключ моей страницы
Я пробовал это, и, похоже, это не имеет никакого эффекта (все еще вызывает ту же проблему).
Покажите нам демонстрацию того, что у вас есть
В последней строке моего вопроса есть код того, что у меня есть.






Прежде всего, с вашим подходом к размещению всего в гибких контейнерах использование display: fixed на панели навигации приносит больше вреда, чем пользы, поскольку только последний div будет прокручиваться сам по себе, панель навигации останется на месте независимо от прокрутки. Как только навигационная панель становится display: block, она больше не выводится из контекста обычного макета, и ее родительский гибкий контейнер может использовать ее высоту в обычных вычислениях.
Кроме того, по умолчанию для дочерних элементов Flex установлено значение flex-shrink, равное 1, что означает, что высота вашего контейнера tabs уменьшится, как только общая высота всех дочерних элементов Flex превысит высоту контейнера Flex. Установка на 0 предотвращает эту проблему.
Конечный результат со всеми вышеупомянутыми исправлениями можно найти в разветвленном кодовый ключ.
Я не понимал, что свойство сжатия на вкладках было причиной сдвига / сжатия элементов. Это работает безупречно. Большое спасибо!
Установите высоту
100vh, а не 100%.