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


Tags: css,twitter-bootstrap,css3,twitter-bootstrap-3,background-image

Problem :

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? I'm not asking how to make a sticky footer. I am asking how to make the content's background fill to reach where the sticky 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>

Here is an example when there isn't enough content to fill: -https://heavensgospel.org/about It's working now. Look at update for how I made it work.

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.

UPDATE Veiko's answer is correct but very unsupported. c01gat3's answer is correct and widely supported but hacky. I discovered a less-hacky way in my opinion (It's still hacky and frowned upon though). It uses display: table as a layout and then for the middle content cell, it uses height: auto to fill in the blank space between the head navbar and sticky footer. I didn't come up with this myself though haha.

<style>
#tablecontainer{
width: 100%;
height: 100%; 
}

.table-panel {
    display: table;
}
.table-panel > div {
    display: table-row;
}
.table-panel > div.fill {
    height: auto;
}




/* Unimportant styles just to make the demo looks better */
#top-cell {
    height: 50px;
    background-color:aqua;
}
#middle-cell {
  /* nothing here yet */
  background-color:purple;
}
#bottom-cell {
    height:50px;
    background-color:red;
}




body {
    height: 100%;
    margin: 0;
}
html {
    height: 100%;
}
</style>

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

Here is a fiddle of the updated method to get the center content to fill in the blank space where the sticky footer is. https://jsfiddle.net/uzfcvzde/



Solution :

if you add the following property to .boxshadow-outer it will work

.boxshadow-outer {
    min-height: calc(100vh - 103px);
}

This forces the container to be 100% of the viewport height and then subtracts the height of the navbar and footer (103px).


    CSS Howto..

    How to make common reusable css for almost every common things in web design?

    How to call image on css?

    How to get this hover effect with just CSS

    how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]

    How can i make it through using bootstrap grid?

    Foundation CSS Framework, how to change triangle on accodion

    How to build HTML email using CSS?

    How to position html tag above an image and in the middle?

    How do I properly set width to a percentile and keep a min-width in pixels?

    How to bypass an overriding CSS Declaration

    How to change css style of input and some text in one function?

    How to make to div comes the one under the other

    how to set a path to the static files which is surver independnet

    Css how to set 3 block block/div's in one line [closed]

    How to make a simple contact form input box responsive

    How to set readonly property of textbox from css

    how to load an external css file if javascript is disabled

    How to use a different stylesheet for iphone or android? I can modify only html later on

    How to set font “ Balzano” to the text in enclosed in

    on my website?

    How to align more than one DIVs which list of letters to the center

    How to add links to tabbing order when they're made visible with CSS?

    How do you set the scroll bar skin on a single List instance?

    How can clients without Ruby view web pages using SASS?

    how to deselect the active span element?

    CSS how to place an image to the right of variable width text on roll over?

    how can I shape the image size according to its nested box

    how can i add extra element style for external css file?

    How to get next elements before a specific element using jquery or css

    How to change css style for only one image in specific page in wordpress?

    How do I align something in a in the top-left corner - without aligning everything?