'CSS to make HTML page footer always display without overlapping content when resizing browser window [duplicate]

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


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 fnostro

Related Questions