Установите макет на высоту области просмотра, как минимум - PullRequest
Новая
       6

Установите макет на высоту области просмотра, как минимум

0 голосов
/ 30 ноября 2018

Я использую CSS Grid для создания областей заголовка / контента / нижнего колонтитула.

У меня проблема в том, что:

  • Я могу настроить сетку наиспользуйте все пространство видового экрана, задав ему высоту.Но тогда, если мой контент больше, чем область просмотра, мой нижний колонтитул перекрывает его.

  • Или не дает ему высоту, и в этом случае нижний колонтитул остается в нижней части контента, но еслиКонтент мал, моя сетка не займет все окно просмотра.

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

У меня есть кодовая ручка, иллюстрирующая проблему: https://codepen.io/jlengrand/pen/Krbaob

.app {
  text-align: center;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 10% 80% 10%;
  height: 100vh;
}

header {
  background-color: #222;
  color: white;
}

content {
  overflow: auto;
}

footer {
  background-color: #222;
  color: white;
}
<div class="app">
  <header>
    <h1>Title</h1>
  </header>

  <div class="content">
    <p>Main content</p>
  </div>
  <footer>
    <p>Some text</p>
  </footer>
</div>

1 Ответ

0 голосов
/ 30 ноября 2018

Вы можете использовать min-height вместо height или, поскольку вы используете Grid, используйте функцию minmax: 

.app {
  display: grid;
  grid-template-rows: 10vh minmax(80vh, auto) 10vh;
}

header {
  background-color: #222;
  color: white;
}

footer {
  background-color: #222;
  color: white;
}

body {
  margin: 0;
}

.app>* {
  display: flex;
  align-items: center;
  justify-content: center;
}
<article class="app">
  <header>
    <h1>Title</h1>
  </header>
  <main>
    <p>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br>Main content<br></p>
  </main>
  <footer>
    <p>Some text</p>
  </footer>
</article>

пересмотренная кодовая ручка

...