0

I want the footer to stick to the window bottom and always display when the user resizes the browser window (whenever and wherever they decide to also stretch the browser window) without overlapping other content. The behavior should remain the same whenever the browser window is also maximized. I'm trying to keep the content of my web page within a single page where scrolling is not required.

Here is an example of my CSS for my footer:

<html style="height:100%;overflow:hidden;">
<body style="height:100%">
<footer style="background-color:red;width:100%;position:absolute;bottom:0;" align="center">
</footer>
</body>
</html>
archeryninja
  • 47
  • 1
  • 12
  • Please share your all html and css structure – Evren May 09 '22 at 19:54
  • To prevent overlapping, you will need to apply margin (or padding...depending) to the main display area that is the height of your footer. – fnostro May 09 '22 at 19:56
  • @fnostro wouldn't that shift all the contents within the main around? Unless I set the margins to auto? – archeryninja May 09 '22 at 20:14
  • You should create a EMPTY div at the BOTTOM of your content with a height equal to the height of your footer -- This will allow for no overflowing content. – Zak May 09 '22 at 20:19
  • Yes: alternatively you can keep the footer in the flow and the content will adjust itself with the right css. Many different ways to do this, "right" is what works for your situation. – fnostro May 09 '22 at 20:34

1 Answers1

0

* {
  box-sizing: border-box;
}

html,
body {
  position: relative;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  padding-bottom: 40px;
}

.main {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  border-bottom: 1px solid red;
}

.footer {
  position: relative;
  bottom: 0;
  left: 0;
  height: 30px;
  width: 100%;
  padding: 4px 20px;
  background-color: #ccc;
  opacity: .5;
}
<body>
  <div class="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae imperdiet mauris. Vestibulum lacinia ultrices urna vel pretium. In hac habitasse platea dictumst. Ut eleifend turpis vel massa placerat dignissim. Curabitur id hendrerit dolor, eget
      luctus lacus. Maecenas iaculis nisl ut ex laoreet, ac dignissim purus imperdiet. Maecenas consequat erat at ultrices tristique. Nunc eleifend porta tristique. Cras aliquam magna eu rhoncus fringilla. In posuere elit at purus fringilla fermentum.
      Vivamus vitae dolor sit amet sapien fermentum pellentesque at in lectus.</p>
    <p>
      Etiam maximus nisl ac odio lacinia scelerisque. Nunc molestie lorem eu tellus pharetra, eu dapibus ex dapibus. Nullam mattis ligula a libero gravida, nec scelerisque mauris malesuada. Morbi a varius augue. Cras quis purus quis mauris commodo iaculis.
      Quisque sodales nisi et faucibus congue. Nulla finibus lorem ut dui rutrum, sed varius mauris dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vitae massa risus. Interdum et malesuada fames
      ac ante ipsum primis in faucibus. Praesent non imperdiet erat. Nullam pellentesque placerat nisi, sit amet euismod odio porttitor eu. Duis auctor egestas velit id placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
      inceptos himenaeos. Aenean non libero at mi semper tristique ut sit amet elit. Aenean quam enim, condimentum sit amet venenatis ac, lacinia sit amet diam.</p>
  </div>
  <footer class="footer">This is a footer</footer>
</body>
fnostro
  • 4,228
  • 1
  • 14
  • 23