Строка нижнего колонтитула с использованием CSS-сетки не будет прилипать к низу в представлении мобильного устройства - PullRequest
Новая
       16

Строка нижнего колонтитула с использованием CSS-сетки не будет прилипать к низу в представлении мобильного устройства

0 голосов
/ 11 июня 2019

Я использую HTML и CSS (Grid) для создания довольно простого сайта. Для основной сетки есть 1 столбец и 5 строк. В 4-й строке находится сетка с 1 строкой и 3 столбцами.

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

Эта 4-я строка с сеткой внутри нее настроена на изменение с помощью @media экранной метки. Он изменяется на 1 столбец с 4 строками, если размер экрана меньше 840 пикселей.

Основной код упаковки: 

.wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100%;
  grid-template-columns: 100%;
  -ms-grid-rows: 5% 15% 20% 60% 30%;
  grid-template-rows: 5% 15% 20% 60% 30%;

  height: 100vh;
}

4-й ряд в главной оболочке с сеткой: 

@media (max-width: 840px) {
  .main_services_wrap {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: 5% 100% 100% 100%;
    grid-template-rows: 5% 100% 100% 100%;
  }
}

Ответы [ 2 ]

0 голосов
/ 12 июня 2019 

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: red;
}

.footer {
  background: blue;
}

.main {
  text-align: left;
  background: yellow;
}


@media all and (min-width: 600px) {
  .aside { flex: 1 0 0; }
}

body {
  padding: 2em; 
}
<!DOCTYPE html>
<html>
<head>
<body>
<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </article>
  <footer class="footer">row1</footer>
  <footer class="footer">row2</footer>
  <footer class="footer">row3</footer>
  <footer class="footer">row4</footer>
  <footer class="footer">row5</footer>
</div>
</body>
</html>
0 голосов
/ 12 июня 2019

Я ужасно сформулировал этот ответ. Чтобы повторить мою проблему, у меня была 5-я строка, действующая в качестве нижнего колонтитула с использованием CSS Grid. Всякий раз, когда содержимое в главном ряду (4-й ряд) превышает его высоту, содержимое расширяется ниже строки нижнего колонтитула, и строка нижнего колонтитула остается на месте.

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

...