Sticky footer (not fixed) hiding main content

Question

Maybe I've built things wrong (as usual sigh) but issue is, I'm getting main content behind my footer once the content reaches all the way down. Though it does what I want it to do by pushing the footer downwards once content starts to fill up...but it has a certain amount of info always hiding behind the footer. Is it because of floats/positions?

You can see from this codepen URL: http://codepen.io/anon/pen/ygGZNR

height: 200px;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
border-top: 1px solid red;

The footer starts where the red line is, and you see the problem.

A request: I want the footer to have the same effect now, stay fixed with no/little content in the main window but be pushed down once content gets close to it, thank you boys n girls!

Answer 1

I think you can acchieve what you want using some flex-box concepts. First, I stringly recommend you to take a look at FlexBox, After that you will easy understand the I use to solve your problem.

Basically, what I did was to tell to main-content to take as much space as it needs, and after it ends then place the footer. Doing this you will have two advantages:

1. You dont need to use absolute/fixed positioning, what is going to get you in trouble if you want to make your site responsive.
2. It does not matter how much space main-content needs, footer will be always above it.

In the example above I've left all comments just for letting you understand what I've removed and waht I've added.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-image: url("../img/france.jpg");
  /* Background image from www.pixabay.com */
  /*"All images and videos on Pixabay are released free of copyrights under Creative Commons CC0." */
  background-repeat: no-repeat;
  background-size: cover;
  /*width: 100vw;*/
}
body {
  background-color: #a9a9a9;
  /*margin-bottom: 100px;*/
}
#wrapper {
  min-height: 100%;
  margin: 0 auto;
  width: 1000px;
  position: relative;
  background-color: #fff;
  /*border-left: 5px solid #313131;*/
  /*border-right: 5px solid #313131;*/
}
#header {
  height: 200px;
  background-image: url("../img/Me.jpg");
}
#footer {
  /*background-image: url("../img/Me_footer.jpg");*/
  display: inline-block;
  height: 200px;
  background-color: red;
  /*position: absolute;*/
  width: 100%;
  /*bottom: 0;*/
  /*left: 0;*/
  border-top: 1px solid red;
}
#home,
#om_mig,
#histernet,
#integnet {
  width: 200px;
  float: left;
  border-top: 1px solid #313131;
  border-left: 1px solid #313131;
  border-right: 1px solid #313131;
  margin: 10px 0 0 38.4px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  text-align: center;
  padding: 10px 0;
}
span {
  font-size: 20px;
  font-weight: bolder;
}
#main_content {
  padding: 20px;
  background-color: green;
  border-top: 5px solid #313131;
  display: flex;
  flex-direction: column;
  /*height: calc(100% - 200px);*/
}
.active {
  background-color: yellow;
  -webkit-box-shadow: inset 4px 4px 7px -2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 4px 4px 7px -2px rgba(0, 0, 0, 0.75);
  box-shadow: inset 4px 4px 7px -2px rgba(0, 0, 0, 0.75);
}
.inactive {
  background-color: lightgrey;
  -webkit-box-shadow: inset 4px 3px 7px -2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 4px 3px 7px -2px rgba(0, 0, 0, 0.75);
  box-shadow: 4px 3px 7px -2px rgba(0, 0, 0, 0.75);
}
#clear,
#footer {
  clear: both;
  /*bottom: 100px;*/
}

<div id="wrapper">
  <div id="header"></div>
  <div id="content">
    <a href="#">
      <div id="home" class="active">
        <span id="nav_text">Home</span>
      </div>
    </a>
    <a href="#">
      <div id="om_mig" class="inactive">
        <span id="nav_text">About</span>
      </div>
    </a>
    <a href="#">
      <div id="histernet" class="inactive">
        <span id="nav_text">Internet</span>
      </div>
    </a>
    <a href="#">
      <div id="integnet" class="inactive">
        <span id="nav_text">Ethics</span>
      </div>
    </a>

    <div id="clear"></div>

    <div id="main_content">Main content
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
      <p>shfkjshdf kjsdhf ksjdhf</p>
    </div>
  </div>
  <!-- content -->
  <div id="footer">Footer</div>
</div>
<!-- wrapper -->

Answer 2

update your css as follows

insted of position: absolute; make position:relative;

#footer{
    /*background-image: url("../img/Me_footer.jpg");*/
    height: 200px;
    /*background-color: red;*/
    position:relative;
    width: 100%;
    border-top: 1px solid red;
}

Answer 3

You can add:

#content {
  padding-bottom: 200px;
}

Basically offsetting the height of the footer.

http://codepen.io/sol_b/pen/QdzYvV