Блог

Главная - Вопросы по программированию - Прокручиваемый элемент внутри макета сетки, без фиксированной высоты

Прокручиваемый элемент внутри макета сетки, без фиксированной высоты

#html #css #angular #sass #scroll

Вопрос:

В течение нескольких дней я сталкивался с проблемой CSS с прокручиваемым компонентом.

Это страница, которую я должен разработать:

введите описание изображения здесь

Как вы можете видеть, у меня есть верхняя панель навигации, компонент «Хлебная крошка», центральный компонент содержимого и нижний колонтитул. Центральная часть состоит из 4 различных компонентов: верхний заголовок, который обрабатывает запросы дней/месяцев, левая часть представляет собой список выбираемых компонентов, график ( в центре ) и список предупреждений ( диалогов ) слева.

Правая и левая части должны быть прокручиваемыми. Проблема в следующем: я хочу, чтобы максимальная высота прокручиваемого содержимого составляла высоту страницы ( 100 дюймов ) минус высота компонентов выше и ниже ( панель навигации, компоненты верхнего и нижнего колонтитулов ). Я использую Angular с SCSS.

У меня есть структура HTML, подобная этой:

 <div class="body-container">
  <ac-navbar></ac-navbar>
  <div class="main>
    <ac-sensor-container>
      <ac-sensor-header></ac-sensor-header>
      <ac-sensor-list></ac-sensor-list>
      <ac-sensor-chart></ac-sensor-chart>
      <ac-sensor-alerts></ac-sensor-alerts>
    </ac-sensor-container>
  </div>
  <footer></footer>
</div>

Внутри у <div class="main"> меня есть <router-outlet> так, чтобы все внутри маршрутизатора имело верхний контейнер.

CSS на body-container :

 display: flex;
flex-direction: column;
min-height: 100vh;

CSS на main : flex-grow: 1

CSS на ac-sensor-container :

 display: grid;
grid-template-columns: 15% 70% 15%;

CSS on ac-sensor-list :

 overflow-y: auto;
max-height: calc(100vh - 15.75rem);

Как вы можете видеть, calc используется неправильно, так как он не реагирует, он подходит не для каждого экрана.

Есть ли лучший способ установить ac-sensor-list возможность прокрутки, чтобы она всегда была на максимальной высоте 100 Вч за вычетом высоты других компонентов? Не сообщая явно точную высоту?

Метки: ,