Customize your footer:

#footer {
    position: fixed;
    height: 50px;
    background-color: red;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}

Create a stylish body:

body {
    margin-bottom:50px;
}

#footer {
  background-color: red;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  margin-bottom: 0px;
}

div {
  margin: 20px 20px;
}

body {
  margin-bottom: 50px;
}

<div>
  Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like it always fixed at the bottom regardless of screen size from now on. Various attempts were made using different properties like bottom:
  0x and position:absolute, but none proved successful. Sometimes the footer was pushed out of its container when trying to fix it at the bottom. The HTML and CSS for the main footer and copyright bar are included in a div. Previous attempts to adjust
  the positioning have been removed so viewers can observe the current code and suggest modifications if needed.
</div>
<div id="footer">
  This is footer
</div>

Check out demo on jsFiddle

Utilizing FlexBox allows us to create a Sticky Footer and Header without the need for POSITION properties in CSS.

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

header {
  height: 50px;
  flex-shrink: 0;
  background-color: #037cf5;
}

footer {
  height: 50px;
  flex-shrink: 0;
  background-color: #134c7d;
}

main {
  flex: 1 0 auto;
}

<div class="container">
  <header>HEADER</header>
  <main class="content">

  </main>
  <footer>FOOTER</footer>
</div>

DEMO - JSFiddle

Note : Verify browser support for FlexBox. caniuse

To achieve this effect, include position:fixed; and bottom:0; within the #footer selector:

See demo here

CSS Styles

#footer {
    background-color: #F3F3F3;
    padding-top: 10px;
    padding-bottom: 0px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

Specify

html, body {
    height: 100%;
}

Enclose all content above the footer in a div.

.content-wrapper {
    height:auto !important;
    min-height:100%;
}

You have the flexibility to adjust the min-height to determine how much of the footer should be visible at the bottom of the browser window. For example, setting it to 90% will display 10% of the footer before scrolling.

Styling with CSS

html {
    height:100%;
}
body {
    min-height:100%; position:relative;
}
.footer {
    background-color: rgb(200,200,200);
    height: 115px;
    position:absolute; bottom:0px;
}
.footer-ghost { height:115px; }

Adding Structure in HTML

<div class="header">...</div>
<div class="content">...</div>
<div class="footer"></div>
<div class="footer-ghost"></div>

I have found success with this code:

footer{
    background-color: #333;
    color: #EEE;
    padding: 20px;
    left: 0;
    width: 100%;
    bottom: 0;
    position: fixed;
}

An important detail to note is the inclusion of bottom:0; and position: fixed;

If you're looking for an easy way to fix the footer with CSS, consider this solution:

#sticky-footer{
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 40px;
    width: 100%;
    background: #3498db;
}

Dealing with a sticky footer on responsive websites can be tricky, especially when the height of your navigation and footer elements vary based on the device being used. However, if you're focusing on modern browsers, you can achieve the desired outcome by incorporating some Javascript.

For example, if your HTML looks like this:

<div class="nav">
</div>
<div class="wrapper">
</div>
<div class="footer">
</div>

You can utilize the following JQuery code snippet on each page:

$(function(){

  /* Sets the minimum height of the wrapper div to ensure the footer reaches the bottom */
  function setWrapperMinHeight() {
    $('.wrapper').css('minHeight', window.innerHeight - $('.nav').height() - $('.footer').height());
  }
  /* Ensure the main div is resized properly upon loading */
  setWrapperMinHeight();

  /* Resize the wrapper div whenever the screen size changes */
  window.onresize = function() {
    setWrapperMinHeight();
  }
});

Your footer won't automatically stick to the bottom of your screen unless you specifically style it that way.
So, if your page doesn't have enough content to push it down, it might end up awkwardly positioned in the middle of the viewport, unsure of where it belongs - almost like a lost freshman on their first day of high school.

If you use the fixed rule to position the footer element, it will always stay visible at the bottom regardless of the initial page height. However, be sure to set a bottom margin to prevent it from covering up the last content on the page. This can get tricky when dealing with footers of dynamic heights, common in responsive design due to the stacking nature of elements.

A similar issue arises with absolute positioning, as it removes the element from the normal flow of the document but still may not keep it fixed to the bottom of the screen on pages with limited content.

To achieve this, consider:

1. Setting a height value for the <body> & <html> tags
2. Specifying a minimum-height for the nested wrapper element, typically the container for all descendant elements within the body structure (excluding the footer)

Check out this Code Pen Example for reference

$("#addBodyContent").on("click", function() {
  $("<p>Insert placeholder text here.</p>").appendTo(".flex-col:first-of-type");
});

$("#resetBodyContent").on("click", function() {
  $(".flex-col p").remove();
});

$("#addFooterContent").on("click", function() {
  $("<p>Insert placeholder text here.</p>").appendTo("footer");
});

$("#resetFooterContent").on("click", function() {
  $("footer p").remove();
});

html, body {
    height: 91%;
}

.wrapper {
    width: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 10px;
    display: block;
    min-height: 100%;
}

footer {
    background: black;
    text-align: center;
    color: white;
    box-sizing: border-box;
    padding: 10px;
}

.flex {
    display: flex;
    height: 100%;
}

.flex-col {
    flex: 1 1;
    background: #ccc;
    margin: 0px 10px;
    box-sizing: border-box;
    padding: 20px;
}

.flex-btn-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.btn {
    box-sizing: border-box;
    padding: 10px;
    transition: .7s;
    margin: 10px 10px;
    min-width: 200px;
}

.btn:hover {
    background: transparent;
    cursor: pointer;
}

.dark {
    background: black;
    color: white;
    border: 3px solid black;
}

.light {
    background: white;
    border: 3px solid white;
}

.light:hover {
    color: white;
}

.dark:hover {
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="flex-btn-wrapper">
        <button id="addBodyContent" class="dark btn">Add Content</button>
        <button id="resetBodyContent" class="dark btn">Reset Content</button>
    </div>
    <div class="flex">
    <div class="flex-col">
      lorem ipsum dolor...
    </div>
    <div class="flex-col">
      lorem ipsum dolor...
    </div>
    </div>
    </div>
<footer>
    <div class="flex-btn-wrapper">
        <button id="addFooterContent" class="light btn">Add Content</button>
        <button id="resetFooterContent" class="light btn">Reset Content</button>
    </div>
    lorem ipsum dolor...
</footer>

The Footer should be located at the bottom of the webpage, without being fixed.

CSS

html {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100%;  
  padding: 0;
}
#header {
  background: #595959;
  height: 90px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
  background-color: #595959;
}

HTML

<html>
   <head></head>
   <body>        
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>     
   </body>
</html>  

One way to create a layout is by using Grid Layout. This method is newer compared to Flexbox, but it isn't as widely supported across different browsers.

Here is an example of how you can implement Grid Layout:

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}   

.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

Helpful Resources:

Browser Support: Check the compatibility of Grid Layout

Complete Guide: Comprehensive Grid Layout guide

Here is my approach:

html, body {
  min-height: 100%
}

body {
  padding-bottom: 88px;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 88px;
}

After testing various solutions without success, I turned to Jose's method which finally did the trick for me. Since I am not using bootstrap 4 for my project, I had to tweak the code to work with pure CSS. The content-container div should contain all the visible content on the page and end with the footer div.

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

.footer{
   margin-top:auto;
}
    

If you happen to be working on a Wordpress site with a modern theme, you can make adjustments to accommodate logged-in users by adding the following code:

.logged-in  .content-container{
  min-height: calc(100vh - var(--wp-admin--admin-bar--height));
}