Блог

Главная - Вопросы по программированию - Как разместить нижний колонтитул в нижней части сетки, не меняя другие строки?

Как разместить нижний колонтитул в нижней части сетки, не меняя другие строки?

#html #css #css-grid

Вопрос:

Я хочу разместить нижний колонтитул в нижней части страницы макета (когда высота меньше окна). Обычно упоминается , что решение есть min-height:100vh , но это увеличивает высоту и других элементов. Я хочу ограничить высоту всех строк высотой их содержимого, в то время как нижний колонтитул перемещается снизу (всякий раз, когда это необходимо).

 body {
  font-family: Helvetica;
}

.wrapper {
  display: grid;
  grid-template-columns: auto;
  min-height:100vh;
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
  width:100%;
}

.a {grid-area: 1/1/2/2;}
.b {grid-area: 2/1/3/2;}
.footer {grid-area: 4/1/5/2;} 
 <div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box footer">Footer</div>
</div>

JSFIDDLE

Ответ №1:

У вас есть несколько ошибок в выборе размера.

для полной страницы и padding для тела вы не можете использовать здесь min-height:100vh , потому что высота видового экрана будет смещена на 20 пикселей от заполнения тела и, в конечном счете, горизонтальной полосы прокрутки. Используйте min-height:100% вместо этого и установите для тела значение 100vh of height . ( box-sizing также необходимо сбросить).

width : 100% не требуется для элемента блока (если у вас нет конкретной причины)

примеры.

  • фиксация размера и установка нижнего колонтитула внизу (опция «липкий»)
 body {
  padding: 20px;
  font-family: Helvetica;
  margin: 0;
  height: 100vh;/* reference for the direct child */
  box-sizing: border-box;/* include padding and border into size calculation */
}

.wrapper {
  display: grid;
  grid-template-columns: auto;
  min-height: 100%;/*of avalaible space of sized(height:xx) parent */ 
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

.a {
  grid-area: 1/1/2/2;
}
.b {
  grid-area: 2/1/3/2;
}
.footer {
  grid-area: 4/1/5/2;
  /* ?? should I stick at the bottom of the viewport ?? */
  position:sticky;
  bottom:0;
} 
 <div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box footer">Footer</div>
</div>

если footer вам не нужно, чтобы вас видели в любое время, удалите position:sticky и. bottom:0

  • хитрость, чтобы следовать вашей grid-area идее настроек (без шаблона строк), чтобы уменьшить первые строки, вставьте виртуальный контейнер exta, который будет использовать так много строк .(не элегантный и средний, разрывается, если установлены вертикальные зазоры.)
 body {
  padding: 20px;
  font-family: Helvetica;
  margin: 0;
  height: 100vh;/* reference for the direct child */
  box-sizing: border-box;/* include padding and border into size calculation */
}

.wrapper {
  display:grid;
  min-height: 100%;/*of avalaible space of sized(height:xx) parent */ 
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

.a {
  grid-area: 1/1/2/2;
}
.b {
  grid-area: 2/1/3/2;
}
.footer {
  grid-area: 0/1/21/2;

}

/* fill a few rows if any rooms left */
.wrapper:before {
  content:'';
  grid-area:3/1/19/2;/* about 15 rows */
} 
 <div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box footer">Footer</div>
</div>
  • для использования grid с правильной опцией здесь на a grid-template-rows ( grid-template-area в вашем исходном фрагменте кода нет набора):
 body {
  padding: 20px;
  font-family: Helvetica;
  margin: 0;
  height: 100vh;
  /* reference for the direct child */
  box-sizing: border-box;
  /* include padding and border into size calculation */
}

.wrapper {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100%;
  /*of avalaible space of sized(height:xx) parent */
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

.footer {
  grid-row: 4
} 
 <div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box footer">Footer</div>
</div>

Комментарии:

1. Когда я открываю ваш фрагмент на всю страницу, каждая строка составляет ровно 1/4 высоты страницы. Я что-то пропустил? Весь смысл в том , чтобы сохранить высоту a b и footer ограничить высоту их содержимого.

2. если вы установите минимальную высоту для своей сетки, она растянет строки, чтобы заполнить эту высоту. Это нормальное поведение, вам нужно вставить дополнительную строку virtual, которая растянется настолько, насколько это возможно, если есть место. @Googlebot Я обновлю фрагмент с примером этой идеи.

3. Это основа моего вопроса: как разместить нижний колонтитул в нижней части страницы, не затрагивая/не растягивая другие строки. Я уже упоминал, что min-height здесь это не работает. Я ищу другое решение.

4. @Googlebot однако вам также нужно будет управлять размером, чтобы избежать переполнения/смещения, когда это не требуется. обновил свой фрагмент с областью сетки. использование строк-шаблонов сетки здесь было бы более эффективным. (область сетки в большинстве случаев недостаточно гибкая на мой вкус, просто личное мнение). добавлено 2 фрагмента, для меня последний является наиболее эффективным.

Метки: ,