Прокручиваемый элемент с гибкостью, выталкивающей другие элементы по мере роста

Я пытаюсь создать страницу со следующим макетом:

+-------------------------------------------------------+
|                                                       |
|                           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 начинает продвигаться все дальше и дальше.

Что вызывает это и как это предотвратить? Мне просто нужна страница с фиксированным содержимым и элементом, занимающим оставшуюся высоту. Вот кодовый ключ моей страницы

Установите высоту 100vh, а не 100%.

Paulie_D 18.11.2018 16:57

Я пробовал это, и, похоже, это не имеет никакого эффекта (все еще вызывает ту же проблему).

Guru Prasad 18.11.2018 17:36

Покажите нам демонстрацию того, что у вас есть

Paulie_D 18.11.2018 18:20

В последней строке моего вопроса есть код того, что у меня есть.

Guru Prasad 18.11.2018 18:26
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
4
65
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

Guru Prasad 18.11.2018 18:30

Другие вопросы по теме