Вывод нижнего колонтитула из поля зрения с помощью сетки CSS - PullRequest
Новая
       17

Вывод нижнего колонтитула из поля зрения с помощью сетки CSS

3 голосов
/ 22 марта 2019

У меня есть заголовок высотой 70px, основной контент, который я хочу заполнить остальной частью экрана, а затем нижний колонтитул 70px. Я пытаюсь найти самый простой способ скрыть нижний колонтитул. Это работает с учетом нижнего колонтитула - см. jsfiddleи фрагмент ниже: 

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  height: 100vh;
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px auto [footer] 70px;
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  grid-row: 3;
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}
<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>

Но я хочу отодвинуть его от экрана, чтобы при необходимости использовать кнопку для отображения.Я попытался использовать grid-template-rows: [header] 70px calc(100vh - 70px) [footer] 70px, который дает мне эффект, который я хочу видеть jsfiddle и фрагмент ниже: 

* {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  height: 100vh;
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px calc(100vh - 70px) [footer] 70px;
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  grid-row: 3;
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}
<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>

Но проблема в том, что, если я использую grid-gap: 10px, я должен вычислить это в grid-template-rows, которое затем становится грязным, если я добавлюбольше разделов.

Например, в 3 разделах будет 2 пробела, если я установлю промежуток 10px, общая сумма будет 20px, плюс 70px для нижнего колонтитула, что означает 90px.Если кто-то принимает код, он должен знать, что ему нужно добавить это вручную в строку grid-template-row, которая, я знаю, будет пропущена.У кого-нибудь есть простая идея, что мне не хватает?

1 Ответ

2 голосов
/ 22 марта 2019

Вы можете удалить footer из явной сетки (изменить явную сетку определение строки на grid-template-rows: [header] 70px 1fr и удалить grid-row: 3 из footer) и установить контейнер сетки высота равен calc(100vh + 70px) и установите строку неявной сетки (которая является вашей footer высотой) с помощью grid-auto-rows: 70px.

См. Демонстрацию ниже с vanilla CSS : 

* {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  height: calc(100vh + 70px); /* adding footer height */
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px 1fr; /* removed footer from here */
  grid-auto-rows: 70px; /* implicit grid height - footer height */
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  /*grid-row: 3;*/
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}
<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>

Но, опять же, вам придется делать эти грязные вычисления , когда новые разделы добавляются в сетку.Более динамическая опция - это сохранение элемента сетки (элемент нулевой ширины adjuster в демонстрационном примере ниже) только для установки высоты макета:

  • помещается в первый столбец и охватывает первые две строки

  • имеет height: 100vh, установленное и оттолкнутое с z-index: -1, так что оно не 't влияет на макет.

См. демонстрацию ниже: 

* {
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px 1fr; /* removed footer from here */
  grid-auto-rows: 70px; /* implicit grid height - footer height */
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  /*grid-row: 3;*/
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}

.adjuster { /* grid items spanning two rows with explicit height set */
  width: 0;
  position: relative;
  z-index: -1;
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 100vh;
}

section { /* new sections added*/
  background: cadetblue;
}
<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>
<!-- height adjuster for viewport -->
<span class="adjuster"></span>
<!-- other page sections below -->
<section></section>
<section></section>

Выдержки из неявных и явных сеток из MDN:

The implicit and explicit grid (MDN)

Если вы поместите что-либо за пределы определенной сетки - или из-за объема контента, потребуется больше дорожек сетки - тогда сетка создаст строки и столбцыв неявной сетке .По умолчанию размер этих дорожек будет автоматически изменяться, в результате чего их размер будет зависеть от содержимого, которое находится внутри них.

Вы также можете определить размер дорожек, созданных в неявной сетке, с помощью grid-auto-rows иgrid-auto-columns properties.

Подробнее о явных и неявных сетках можно прочитать здесь: Автоматически добавлен нежелательный столбец CSS Grid

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...