-1

is there a way to have footer beign fixed to the bottom of the screen (viewpor) without using position:fixed property? I'm asking that because on safari fixed positioning causes some troubles and I was wondering if I can do it different way.

Just in case: I want footer to stay at the bottom of the VIEWPORT (not page) even if page is scrolled down.

Thanks.

laptaptap
  • 1
  • 1
  • Does this answer your question? [CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page](https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b) – volt Jan 16 '20 at 18:34
  • I don't want sticky footer. I want the footer to stay at the same position even if page is beign scrolled own. – laptaptap Jan 16 '20 at 18:59
  • 1
    *I want the footer to stay at the same position even if page is beign scrolled own* --> this what position:fixed is made for. If there is trouble with it you need to fix the trouble not remove position:fixed – Temani Afif Jan 16 '20 at 19:02
  • so it cant be done without using js or position fixed? – laptaptap Jan 16 '20 at 19:07
  • You are not being clear about what exactly the problem is. Include a reproducible example in your question with a snippet: https://stackoverflow.com/help/minimal-reproducible-example – BugsArePeopleToo Jan 16 '20 at 19:17

1 Answers1

-1

I would personally look at CSS Grid, e.g.:

html,
body {
  width: 100%;
  height: 100%;
}

article {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}
<html>

  <body>
    <article>
      <header>Header goes here
      </header>
      <main>Main content goes here
      </main>
      <footer>Footer goes here
      </footer>
    </article>
  </body>

</html>

Flexbox is also an option, e.g.:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  height: 100px;
  background-color: blue;
}

main {
  flex: 1 0 auto;
}

footer {
  height: 20px;
  background-color: blue;
}
<div class="container">
  <header>Header goes here</header>
  <main class="content">Main content goes here</main>
  <footer>Footer goes here</footer>
</div>
dikuw
  • 1,134
  • 13
  • 22
  • Neither of those work because they cause vertical scroll when it's not really needed. – volt Jan 16 '20 at 18:44
  • I don't want sticky footer. I want the footer to stay at the same position even if page is beign scrolled down. – laptaptap Jan 16 '20 at 18:59