页脚在底部与css网格？无法计算出来？

bxfogqkk 于 2023-01-10 发布在其他

关注(0)|答案(4)|浏览(99)

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

我知道这个问题已经问过了，但我正在寻找一个修复我自己的代码。抱歉，如果我错过了一些明显的。

css

来源：https://stackoverflow.com/questions/55012845/footer-at-bottom-with-css-grid-cant-figure-it-out

4条答案

按热度按时间

n8ghc7c11#

你可以简单地使用Viewport Height（vh）来固定窗口底部的页脚。这个单位基于视口的高度。1vh的值等于视口高度的1%。所以这里我只设置了. grid的min-height：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>

赞(0）回复(0）举报 2023-01-10

xwbd5t1u2#

这是一个老问题，但这里是我的答案无论如何...
使用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)));
}

赞(0）回复(0）举报 2023-01-10

0pizxfdo3#

超级简单的解决方案：
将以下代码添加到.footer类中：

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

完整的footer类看起来如下所示：

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

这就是你所要做的一切！下面是它的渲染方式：
一个二个一个一个

赞(0）回复(0）举报 2023-01-10

brccelvz4#

这是一个example，代码如下。

- 中央支助组**

html {
  /* min-height on body doesn't work unless it's parent (html) has an explicit height */
  height: 100%;
}

body {
  /* min-height because content larger than 100% of the view height should scroll */
  min-height: 100%;
  display: grid;
  /* we have 3 rows: header, main and footer. We want the main content to fill the empty space when the content doesn't fill the viewport */
  grid-template-rows: auto 1fr auto;
}

- 超文本标记语言**

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <div>
      <p>Header</p>
    </div>
    <div>
      <p>Main</p>
    </div>
    <div>
      <p>Footer</p>
    </div>
  </body>
</html>

请参阅BoltClock的excellent answer以获取更多关于html和body高度用法的解释。

赞(0）回复(0）举报 2023-01-10

我来回答

页脚在底部与css网格？无法计算出来？

4条答案

相关问题

热门标签

最新问答