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

У меня есть заголовок высотой 70 пикселей, основной контент, который я хочу заполнить остальной частью экрана, а затем нижний колонтитул размером 70 пикселей. Я пытаюсь найти самый простой способ скрыть нижний колонтитул. Это работает с нижний колонтитул в поле зрения — см. 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>

But the problem with that is, If I use grid-gap: 10px I have to calculate that in grid-template-rows which then gets messy if I add more sections.

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

html css sass css-grid

22.03.2019 12:20

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

258

Ответы 1

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

См. демонстрацию ниже с ванильный 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, чтобы это не влияло на макет.

См. демо ниже:

* {
  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)
If you place something outside of the defined grid—or due to the amount of content, more grid tracks are needed—then the grid creates rows and columns in the implicit grid. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them.
You can also define a set size for tracks created in the implicit grid with the grid-auto-rows and grid-auto-columns properties.

Вы можете прочитать больше о Явные и неявные сетки здесь: Нежелательный столбец CSS Grid добавляется автоматически

Почти но не совсем. Использование сетки-зазора: 10px; дать вам хороший зазор между сетками, и он работает по мере необходимости. Проблема возникает, когда вы добавляете margin:10px; на теле, чтобы дать вам такой же зазор по краям, чтобы соответствовать зазору сетки. При этом вы теряете зазор внизу. См. здесь: jsfiddle.net/gywfatkL/6

— 22.03.2019 14:19

скорректируйте margin - вы можете сделать свой сетка-контейнерheight: calc(100vh + 70px - 10px) см. jsfiddle.net/2xnyktrg

— 22.03.2019 15:04

@Juan-man обновил ответ с лучшим подходом - см. jsfiddle.net/my4et6j7 и после добавления margin к сетка-контейнер: jsfiddle.net/enjotp9q

— 22.03.2019 15:51

22.03.2019 12:40