CODEWITHSUNDEEP
htmlcssgrid
ZxCvBnM
ZxCvBnM

Reputation: 377

Image valign bottom of grid area

I'm trying to align the image in the main grid area at the bottom of main (sticky) instead of at the top. So when the viewport height expands there has to be more space above the image.

I tried to make main position relative and img position absolute with bottom 0 but then the image will overflow the header area.

This is the current HTML and CSS code: 

@media screen and (max-width: 576px) and (orientation:portrait) {
  html,
  body {
    height: 100%;
  }
  body {
    margin: 0;
  }
  body {
    display: grid;
    grid-gap: 0px;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "main" "footer";
    grid-template-rows: 112px 1fr 50px;
  }
  nav {
    grid-area: nav;
  }
  main {
    grid-area: main;
  }
  footer {
    grid-area: footer;
  }
  nav {
    background-image: url('images/header_xs.png');
    background-repeat: no-repeat;
  }
  main {
    background-color: #ddf4fb;
  }
  footer {
    background-image: url('images/footer_xs.png');
    background-repeat: no-repeat;
  }
  .logo1_xs {
    margin-top: 40px;
    margin-left: 60px;
  }
  .logo2_xs {
    margin-top: 10px;
    margin-left: 60px;
  }
  .coastrunner1_xs {
    width: 100%;
  }
}
<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <nav>
    <img class="logo1_xs" src="images/logo1_xs.png" />
    <img class="logo2_xs" src="images/logo2_xs.png" />
  </nav>
  <main>
    <img class="coastrunner1_xs" src="images/coastrunner1_xs.png" />
  </main>
  <footer>
  </footer>
</body>

</html>

Upvotes: 0

Views: 94

Answers (1)

ZxCvBnM
ZxCvBnM

Reputation: 377

I have done it with the following css style:

main {
  display: flex;
  flex-direction: column;
}

.flex_space {
  flex: 1;
}

And added an empty div:

<main>
    <div class="flex_space"></div>
    <img class="coastrunner1_xs" src="images/coastrunner1_xs.png" />
</main>

Does somebody have a better solution?

Upvotes: 0

Related Questions