Question

我看过其他教程，内容很少时，如何使用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>

我知道已经有人问过这个问题，但是我正在寻找自己的代码的解决方案。抱歉，如果我错过明显的事情。

Answer 1

您只需使用视口高度（vh）即可将页脚固定在窗口底部。该单位基于视口的高度。 1vh的值等于视口高度的1％。所以在这里，我只是设置 .grid 的最低高度：100vh ，而不是最低高度：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>

Answer 2

超级简单的解决方案：
将以下代码添加到您的.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>

Answer 3

这是一个老问题，但无论如何这是我的解决方案......

我使用了 css 变量作为页脚高度和页眉高度。

:root {
   --header-height: 56px;
   --footer-height: 56px;
}

然后我使用 css calc function 单位设置主要元素的最小高度，方法是从 full viewport height 中减去页脚和页眉高度。

main {
   min-height: calc(100vh - (var(--footer-height) + var(--header-height)));
}

CSS网格底部的页脚？无法解决吗？

3 个答案: