底部的页脚与css网格?想不出来?

问题描述 投票:-1回答:2

我看过其他有关如何在内容很少的情况下使用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>

我知道这个问题已被提出,但我正在寻找一个修复我自己的代码。对不起,如果我错过了明显的事

html css grid footer
2个回答
0
投票

您只需使用视口高度(vh)即可将页脚固定在窗口底部。此单位基于视口的高度。值1vh等于视口高度的1%。所以在这里我只设置.grid的最小高度: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>

0
投票

超简单解决方案: 将以下代码添加到.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>
© www.soinside.com 2019 - 2024. All rights reserved.