CODEWITHSUNDEEP
htmlcssgridfooter
Mortrix
Mortrix

Reputation: 91

Footer at bottom with css grid? Can't figure it out?

I have looked at other tutorials on how to make the footer stick to the bottom with css grid when there is little content. But i can't figure it out.

If you could help, that would be great. I'm learning css grid and i've spent days on and off trying to figure it out.

* {
  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>

I know this question have already been asked, but i am looking a for a fix for my own code. Sorry if i missed something obvious.

Upvotes: 7

Views: 11771

Answers (4)

Daniel Douglas
Daniel Douglas

Reputation: 3433

It's an old question but here is my solution anyway...

Use css variables for the footer height and header height.

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

Set the min-height of the main element using the css calc function unit by subtracting the footer and header height from the full viewport height.

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

Upvotes: 2

Tate Thurston
Tate Thurston

Reputation: 4660

Here's an example with the code below.

CSS

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;
}

HTML

<!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>

See BoltClock's excellent answer for more explanation about height usage with html and body.

Upvotes: 2

elbrant
elbrant

Reputation: 791

Super simple solution:
Add the following code to your .footer class:

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

The full footer class will look like:

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

That is litterally all you have to do! Here is how it renders:

* {
  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>

Upvotes: -1

Makdia Hussain
Makdia Hussain

Reputation: 762

You can fixed the footer at the bottom of the window simply by using the Viewport Height (vh) . This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height. So here I just set the .grid's min-height: 100vh rather than 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>

Upvotes: 8

Related Questions