CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Thomas Hutton
Thomas Hutton

Reputation: 803

Content goes past footer

Content of any type goes below and beyond my footer. I can fix this by taking out position: absolute; however, then it isn't sticky anymore. How can I make this a sticky footer?

My HTML:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="CSS/main.css">
    <link rel="stylesheet" type="text/css" href="CSS/navbar.css">
    <title>Home Page</title>
  </head>

  <body>
    <div class="contactandsocial">

    </div>
    <nav class="navbar navbar-default">

    </nav>
    <div class="container">
      <div class="row">

      </div>
    </div>
    <footer>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://use.fontawesome.com/42e4157b18.js"></script>
  </body>

</html>

And my CSS:

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00AEFE;
  height: auto;
}

Upvotes: 0

Views: 2750

Answers (2)

tao
tao

Reputation: 90312

You have two options.

A. Fixed footer (bad)

It's bad because more than half the traffic is now coming from mobile devices and the screen space is quite valuable, you should not occupy it with fixed elements. Another major drawback is that <footer> has to have a fixed height. Alternatively, you can have a javascript function to update page-contents' bottom-padding on page.load and page.resize events, according to footer's height. I could provide it, if needed, but, again, this is (at least in concept), a bad choice for layout:

footer {
  position: fixed;
  height: 100px;
  bottom: 0;
  width: 100%;
}
nav + .container {
  margin-bottom: 120px;
}

/* this is just coloring so you can see elements, you don't need it */
body {margin: 0; padding: 0}
body > * {padding: 10px;}
.contactandsocial { background-color: #ccc;}
nav, footer { background-color: #424242; color: white;}
<div class="contactandsocial">
 I am contact and social
</div>
<nav class="navbar navbar-default">
 I am navigation
</nav>
<div class="container">
    <div class="row">
       Fall asleep on the washing machine touch water with paw then recoil in horror so instantly break out into full speed gallop across the house for no reason. Scream at teh bath purr for no reason going to catch the red dot today going to catch the red dot today yet curl up and sleep on the freshly laundered towels for paw at beetle and eat it before it gets away need to chase tail, and meow loudly just to annoy owners. Throwup on your pillow chirp at birds, or gnaw the corn cob and sit on the laptop knock dish off table head butt cant eat out of my own dish curl up and sleep on the freshly laundered towels peer out window, chatter at birds, lure them to mouth. Gate keepers of hell swat at dog, so lick sellotape jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water, cat snacks, but going to catch the red dot today going to catch the red dot today. Bathe private parts with tongue then lick owner's face thug cat swat turds around the house, but mark territory, yet missing until dinner time. Hate dog please stop looking at your phone and pet me for knock dish off table head butt cant eat out of my own dish behind the couch leave fur on owners clothes or damn that dog and chase the pig around the house. Leave fur on owners clothes eat a plant, kill a hand but drink water out of the faucet so destroy the blinds cat is love, cat is life get video posted to internet for chasing red dot or cat slap dog in face. Lick butt cat is love, cat is life human is washing you why halp oh the horror flee scratch hiss bite eat owner's food. Mark territory spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce for why must they do that, so paw at your fat belly cat is love, cat is life sit in box, and see owner, run in terror. Cats making all the muffins meow all night having their mate disturbing sleeping humans loves cheeseburgers. Meow all night having their mate disturbing sleeping humans leave hair everywhere, or lie on your belly and purr when you are asleep lick butt. Human give me attention meow cat not kitten around licks paws chase laser meow loudly just to annoy owners. Hide at bottom of staircase to trip human catch mouse and gave it as a present. Step on your keyboard while you're gaming and then turn in a circle drink water out of the faucet. If it smells like fish eat as much as you wish lick yarn hanging out of own butt for hiss at vacuum cleaner tuxedo cats always looking dapper or eat grass, throw it back up. Kitty power! with tail in the air. Cats secretly make all the worlds muffins hate dog climb a tree, wait for a fireman jump to fireman then scratch his face fall asleep on the washing machine. Hack up furballs slap owner's face at 5am until human fills food dish. Curl up and sleep on the freshly laundered towels stare at the wall, play with food and get confused by dust but scratch leg; meow for can opener to feed me ignore the squirrels, you'll never catch them anyway but purrr purr littel cat, little cat purr purr toy mouse squeak roll over for when in doubt, wash. Man running from cops stops to pet cats, goes to jail meowing non stop for food soft kitty warm kitty little ball of furr. Unwrap toilet paper nap all day, yet play time, but scream at teh bath yet hide when guests come over, friends are not food but pushes butt to face. Instantly break out into full speed gallop across the house for no reason. 
    </div>
</div>
<footer>
  I am footer.
</footer>

B. Flexbox layout (good)

This is the proper solution. The footer stays at the bottom of page when the page is not tall enough and gets pushed down by the page when the page contents go beyond the fold.

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}
body > *{
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
     -moz-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
body > nav + .container {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
     -moz-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/* this is just coloring so you can see elements, you don't need it */
body {margin: 0; padding: 0}
body > * {padding: 10px;}
.contactandsocial { background-color: #ccc;}
nav, footer { background-color: #424242; color: white;}
<div class="contactandsocial">
 I am contact and social
</div>
<nav class="navbar navbar-default">
 I am navigation
</nav>
<div class="container">
    <div class="row">
      Fall asleep on the washing machine touch water with paw then recoil in horror so instantly break out into full speed gallop across the house for no reason. Scream at teh bath purr for no reason going to catch the red dot today going to catch the red dot today yet curl up and sleep on the freshly laundered towels for paw at beetle and eat it before it gets away need to chase tail, and meow loudly just to annoy owners. Throwup on your pillow chirp at birds, or gnaw the corn cob and sit on the laptop knock dish off table head butt cant eat out of my own dish curl up and sleep on the freshly laundered towels peer out window, chatter at birds, lure them to mouth. Gate keepers of hell swat at dog, so lick sellotape jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water, cat snacks, but going to catch the red dot today going to catch the red dot today. Bathe private parts with tongue then lick owner's face thug cat swat turds around the house, but mark territory, yet missing until dinner time. Hate dog please stop looking at your phone and pet me for knock dish off table head butt cant eat out of my own dish behind the couch leave fur on owners clothes or damn that dog and chase the pig around the house. Leave fur on owners clothes eat a plant, kill a hand but drink water out of the faucet so destroy the blinds cat is love, cat is life get video posted to internet for chasing red dot or cat slap dog in face. Lick butt cat is love, cat is life human is washing you why halp oh the horror flee scratch hiss bite eat owner's food. Mark territory spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce for why must they do that, so paw at your fat belly cat is love, cat is life sit in box, and see owner, run in terror. Cats making all the muffins meow all night having their mate disturbing sleeping humans loves cheeseburgers. Meow all night having their mate disturbing sleeping humans leave hair everywhere, or lie on your belly and purr when you are asleep lick butt. Human give me attention meow cat not kitten around licks paws chase laser meow loudly just to annoy owners. Hide at bottom of staircase to trip human catch mouse and gave it as a present. Step on your keyboard while you're gaming and then turn in a circle drink water out of the faucet. If it smells like fish eat as much as you wish lick yarn hanging out of own butt for hiss at vacuum cleaner tuxedo cats always looking dapper or eat grass, throw it back up. Kitty power! with tail in the air. Cats secretly make all the worlds muffins hate dog climb a tree, wait for a fireman jump to fireman then scratch his face fall asleep on the washing machine. Hack up furballs slap owner's face at 5am until human fills food dish. Curl up and sleep on the freshly laundered towels stare at the wall, play with food and get confused by dust but scratch leg; meow for can opener to feed me ignore the squirrels, you'll never catch them anyway but purrr purr littel cat, little cat purr purr toy mouse squeak roll over for when in doubt, wash. Man running from cops stops to pet cats, goes to jail meowing non stop for food soft kitty warm kitty little ball of furr. Unwrap toilet paper nap all day, yet play time, but scream at teh bath yet hide when guests come over, friends are not food but pushes butt to face. Instantly break out into full speed gallop across the house for no reason. 
    </div>
</div>
<footer>
  I am footer.
</footer>

The unprefixed CSS for the above (B.) solution is: 

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > *{
  flex-grow: 0;
}
body > nav + .container {
  flex-grow: 1;
}

Make each snippet full screen and resize the browser window to see how they work.

Upvotes: 2

MarioZ
MarioZ

Reputation: 997

You should change the footer position to position: fixed;.

Upvotes: 0

Related Questions