Нижний колонтитул внизу с сеткой CSS? Не можете понять это? - PullRequest
Новая
       12

Нижний колонтитул внизу с сеткой CSS? Не можете понять это?

0 голосов
/ 06 марта 2019

Я смотрел другие уроки о том, как заставить нижний колонтитул прикрепляться к нижней части с помощью CSS-сетки, когда контента мало.Но я не могу понять это.

Если бы вы могли помочь, это было бы здорово.Я изучаю сетку CSS, и я потратил несколько дней, чтобы понять это. 

* {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: helvetica;
}

body {
  background-color: #191919;
}

html body {
  height: 100%;
  width: 100%;
}

.grid {
  min-height: 100%;
  display: grid;
  grid-template-columns: 10% 40% 40% 10%;
  grid-template-rows: 50px 1fr auto;
  grid-row-gap: 10px;
  grid-template-areas:
  "header header header header"
  ". main main ."
  "footer footer footer footer";
}
/*Header*/

.header {
  grid-area: header;
  background-color: red;
  display: grid;
  position: fixed;
  width: 100%;
  grid-template-columns: 40% 60%;
  grid-template-areas:
  "title navigation"
}

.title {
  grid-area: title;
  text-align: center;
}

.navigation {
  grid-area: navigation;
}

.title .navigation {
}

/*Main*/

.main {
  margin-top: 50px;
  grid-area: main;
  background-color: #323232;
  border-radius: 10px;
}

/*Footer*/

.footer {
  grid-area: footer;
  background-color: black;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Mortrix</title>
  </head>
  <body>

      <div class="grid">

        <!-- Header -->

        <div class="header">

          <div class="title"> <h1>Mortrix</h1></div>

          <div class="navigation">Navigation</div>

        </div>

        <!-- Main -->

        <div class="main">

          This is some content

        </div>

        <!-- Footer -->

        <div class="footer">Footer

        </div>

      </div>

  </body>
</html>

Я знаю, что этот вопрос уже задавался, но я ищу исправление для своего собственного кода.Извините, если я что-то упустил очевидное.

Ответы [ 2 ]

0 голосов
/ 12 марта 2019

Супер простое решение:
Добавьте следующий код в класс .footer: 

  position:absolute;
  bottom:0;
  left:0;
  right:0;

Полный класс нижнего колонтитула будет выглядеть так: 

.footer {
  grid-area: footer;
  background-color: black;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

Это буквально все, что вам нужно сделать! Вот как это выглядит: 

* {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: helvetica;
}

body {
  background-color: #191919;
}

html body {
  height: 100%;
  width: 100%;
}

.grid {
  min-height: 100%;
  display: grid;
  grid-template-columns: 10% 40% 40% 10%;
  grid-template-rows: 50px 1fr auto;
  grid-row-gap: 10px;
  grid-template-areas:
  "header header header header"
  ". main main ."
  "footer footer footer footer";
}
/*Header*/

.header {
  grid-area: header;
  background-color: red;
  display: grid;
  position: fixed;
  width: 100%;
  grid-template-columns: 40% 60%;
  grid-template-areas:
  "title navigation"
}

.title {
  grid-area: title;
  text-align: center;
}

.navigation {
  grid-area: navigation;
}

.title .navigation {
}

/*Main*/

.main {
  margin-top: 50px;
  grid-area: main;
  background-color: #323232;
  border-radius: 10px;
}

/*Footer*/

.footer {
  grid-area: footer;
  background-color: black;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}
      <div class="grid">

        <!-- Header -->

        <div class="header">

          <div class="title"> <h1>Mortrix</h1></div>

          <div class="navigation">Navigation</div>

        </div>

        <!-- Main -->

        <div class="main">

          This is some content

        </div>

        <!-- Footer -->

        <div class="footer">Footer

        </div>

      </div>
0 голосов
/ 06 марта 2019

Вы можете закрепить нижний колонтитул в нижней части окна, просто используя Высота области просмотра (vh) .Эта единица основана на высоте области просмотра.Значение 1vh равно 1% высоты области просмотра.Поэтому здесь я просто установил .grid s min-height: 100vh вместо min-height: 100% 

      * {
        margin: 0;
        padding: 0;
        color: #ffffff;
        font-family: helvetica;
      }

      body {
        background-color: #191919;
      }

      html body {
        height: 100%;
        width: 100%;
      }

      .grid {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 10% 40% 40% 10%;
        grid-template-rows: 50px 1fr auto;
        grid-row-gap: 10px;
        grid-template-areas:
        "header header header header"
        ". main main ."
        "footer footer footer footer";
      }
      /*Header*/

      .header {
        grid-area: header;
        background-color: red;
        display: grid;
        position: fixed;
        width: 100%;
        grid-template-columns: 40% 60%;
        grid-template-areas:
        "title navigation"
      }

      .title {
        grid-area: title;
        text-align: center;
      }

      .navigation {
        grid-area: navigation;
      }

      .title .navigation {
      }

      /*Main*/

      .main {
        margin-top: 50px;
        grid-area: main;
        background-color: #323232;
        border-radius: 10px;
      }

      /*Footer*/

      .footer {
        grid-area: footer;
        background-color: black;
      }
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Mortrix</title>
  </head>
  <body>

      <div class="grid">

        <!-- Header -->

        <div class="header">

          <div class="title"> <h1>Mortrix</h1></div>

          <div class="navigation">Navigation</div>

        </div>

        <!-- Main -->

        <div class="main">

          This is some content

        </div>

        <!-- Footer -->

        <div class="footer">Footer

        </div>

      </div>

  </body>
</html>
...