Заставить div занять остальное пространство с сеткой css - PullRequest
Новая
       6

Заставить div занять остальное пространство с сеткой css

2 голосов
/ 02 марта 2020

Есть ли способ заставить контейнер сетки расширяться до конца экрана с помощью css-grid (см. Фрагмент ниже, где я использую height: 80vh; для ручного подхода для визуализации)

РЕДАКТИРОВАТЬ Я всегда мог знать высоту верхнего и нижнего колонтитула, а затем использовать, например, grid-template-rows: calc(100vh - ...px);

body {
  margin: 0;
}

.header {
  height: 100px;
  background: #f6eeee;
  margin: 5px 0px;
  border: 1px solid #cacaca;
  padding: 5px;
}

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-column-gap: 10px;
  border: 2px solid #000;
  overflow: hidden;
  margin: 5px 0px;
  border: 1px solid #cacaca;
}

.left {
  display: grid;
  grid-template-rows: calc(100vh - 2*112px - 2*12px);
  /* 100px height + 10px padding + 2px border */
  /* 10px margin + 2px border */
  overflow: auto;
  /* height: 80vh; */
}

.left>div {
  height: 40000px;
  background: #e7e6de;
  padding: 5px;
}

.right {
  height: 300px;
  background: #e3e7e9;
  padding: 5px;
}
<body>
  <div class="header">whatever relevant</div>
  <div class="grid">
    <div class="left">
      <div>lots of content</div>
    </div>
    <div class="right">another content</div>
  </div>
  <div class="header">whatever relevant 2</div>
</body>

1 Ответ

1 голос
/ 02 марта 2020

Самое простое / удобное решение - flexbox. Вы также можете использовать его для stati c высоты верхнего / нижнего колонтитула или динамического элемента c, просто измените высоту верхнего / нижнего колонтитула, заданную в px / vh соответственно.

Нет необходимости использовать функции cal c и это, вероятно, лучший способ создать динамическую сетку c. 

.site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.site-content {
  flex: 1;
}
header, footer {
  height: 20vh;
  background-color: orange;
  color: white;
}
<body class="site">
  <header>Navigation</header>
  <main class="site-content">content goes here</main>
  <footer>Footer stuff</footer>
</body>
...