Stuffed Marshmallow Stuffed Marshmallow - 15 days ago 6
CSS Question

How to make background fill or flush to the footer at the bottom of the window

PLEASE NOTE: THIS IS NOT ASKING HOW TO MAKE MY FOOTER STICKY. THIS IS ASKING HOW TO MAKE THE BACKGROUND FLUSH ALL THE WAY TO WHERE THE FOOTER IS. THIS QUESTIONS HAS BEEN INCORRECTLY MARKED AS A DUPLICATE. My footer is always at the bottom of my website's content, which is great if there is enough content to push the footer down. But the background looks awful when there isn't enough content to push the footer at least to the bottom of the window. Here is what happens when there is enough content:

Enough content to fill in space

Here is what happens when there's not enough content:

Not enough content

How do I make the background stretch to always reach where the footer is?

Here is my css:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

/* This makes the bottom footer sticky. */
body {
/* Margin bottom by footer height */
margin-bottom: 51px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 51px;
margin:0;
padding:0;
}


/* box shadow settings. Don't pay much attention to this. */

.boxshadow-hack {
text-align: center; /* This hack makes the child div (which is .boxshadow-around-content) centered. Because the display is inline-block, it is auto left adjusted normally. */
}
.boxshadow-around-content {
text-align: left; /* This reverses the text-align:center hack that is used to center this div. We will make adjustments to this class depending on the screen width using media queries, because a box shadow doesn't look good if it's too crammed. */
display: inline-block;
background-image:none;
background-color: #FCFCFC;
}

.boxshadow-outer {
text-align: left; /* This reverses the text-align:center hack that is used to center this div. We will make adjustments to this class depending on the screen width using media queries, because a box shadow doesn't look good if it's too crammed. */
display: inline-block;
width:100%;
}

.boxshadow-outer-hack {
text-align: center; /* This hack makes the child div (which is .boxshadow-around-content) centered. Because the display is inline-block, it is auto left adjusted normally. */
width:100%;
background-image: url("http://i609.photobucket.com/albums/tt178/imanono/cream_dust_zpsqualmncn.png");
}

.boxshadow-hack {
margin-bottom: 40px;
margin-top: 40px;
}


.boxshadow-outer {
padding: 0 15px; /* This changes how far away the box shadow is from the website's content. */
-webkit-box-shadow: inset 0px 0px 33px 3px rgba(231,231,231,1);
-moz-box-shadow: inset 0px 0px 33px 3px rgba(231,231,231,1);
box-shadow: inset 0px 0px 33px 3px rgba(231,231,231,1);
}

.boxshadow-around-content {
padding: 5 35px; /* This changes how far away the box shadow is from the website's content. */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(184,184,184,0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(184,184,184,0.75);
box-shadow: 0px 0px 20px 0px rgba(184,184,184,0.75);
}


Here is my html:

<body>
<nav> <!-- top nav stuff here --> </nav>
<div class="boxshadow-outer-hack">
<div class="boxshadow-outer">
<div class="boxshadow-hack">
<div class="boxshadow-around-content">
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">
<b>Title</b>
</h1>
<h2 class="text-center">Second Title</h2>
<!-- Content goes here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<nav> <!-- footer nav stuff here --> </nav>
<body>


I only activated the sticky footer when your screen width is 1200px or more. So you have to make your screen very wide if you want to see it like the screenshots.

Here is an example when there isn't enough content to fill: https://heavensgospel.org/about

Here is an example when there is enough content to fill:
https://heavensgospel.org

I was going to use jsfiddle but it can't interpret my code for the sticky footer correctly. Just copy and paste my code into a local html file to see what my situation is, or go to my link and make your window width above 1200px.

Answer

Just a quick clean code, as I would do:

* {
  box-sizing: border-box;
}

body {
  background-color: rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}

article,
nav,
footer {
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  padding: 1em;
}

article,
menu {
  max-width: 44em;
  width: 80vw;
}

article {
  background-color: white;
  margin: 2em auto;
}

footer {
  background-color: rgba(0, 0, 0, 0.05);
  margin-top: auto;
  text-align: center;
}

menu {
  display: flex;
  margin: 0 auto;
  padding: 0;
}
menu li {
  list-style: none;
}
menu li:nth-child(2) {
  margin-left: auto;
}
<main>
  <nav>
    <menu>
      <li>
        Page Title
      </li>
      <li>
        menuItem#1
      </li>
      <li>
        menuItem#2
      </li>
    </menu>
  </nav>
  <article>
    Page Content
  </article>
</main>
<footer>
  footer
</footer>

Amen!