1

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!

moller.peter
  • 105
  • 2
  • 11
  • You could add a `padding-bottom` to the main content with the same height as the footer. – Sebastian Feb 13 '17 at 12:46
  • is it what you want?: http://codepen.io/anon/pen/RKEvxZ?editors=1100 – Banzay Feb 13 '17 at 12:55
  • Sebastian, Banzay and Ovokuro, you all are correct! I actually did this earlier but since I got funky behavior on my background "cover", I thought I was mistaken...so now I need to see what to do with the background image, thank you all! – moller.peter Feb 13 '17 at 15:18

3 Answers3

1

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;
}
Mandarr Sant
  • 457
  • 9
  • 22
  • Is there any reason not to use `position: static` instead? – sol Feb 13 '17 at 12:56
  • 1
    read this u will get clear explanation http://stackoverflow.com/questions/5011211/difference-between-static-and-relative-positioning – Mandarr Sant Feb 13 '17 at 12:58
  • 1
    Thanks. In this case, why assign a `position` at all? Why not just remove it and leave the footer at default value --- http://codepen.io/sol_b/pen/QdzYBY – sol Feb 13 '17 at 13:02
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 -->
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Facundo La Rocca
  • 3,786
  • 2
  • 25
  • 47
0

You can add:

#content {
  padding-bottom: 200px;
}

Basically offsetting the height of the footer.

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

sol
  • 22,311
  • 6
  • 42
  • 59
  • @moller-peter, I think this is the most elegant solution over all. At the end of the day, the footer is being [removed from the DOM's natural flow](https://developer.mozilla.org/en/docs/Web/CSS/position#Absolute_positioning), which means the rest of the page doesn't know how to leave space for it. This just ensures the `#content` frame explicitly leaves enough space after it's own content to cater for the footer size. –  Feb 13 '17 at 13:02
  • I actually did that earlier, but since I lost the "cover" functionality on the background image I'm using (image scrolls and leaves a white empty space at the footer area), I thought I did wrong. Thanks! – moller.peter Feb 13 '17 at 15:11