1

Making a page with two basic div tags BODY and FOOTER. Both 100% width, footer is 50px high, body is 100%. Body has a background image with the background-size:cover; applied.
I’m fine with getting the footer to stick to the bottom of the page. 

.footer_wrapper {
  width:100%;
  height: 50px;
  clear:both;
  position:absolute;
  bottom:0;
  z-index:10;
  opacity:0.5;
  overflow:auto;
}

I put the opacity to half so I could see that it is on top of the background body. I need the BODY div above it to truly sit above it. Should not see image behind footer. Is this possible? I have seen numerous tutorials but all footers are sitting on top of image.

Thank you

ReshaD
  • 936
  • 2
  • 18
  • 30
LeeAlexander
  • 49
  • 1
  • 8

3 Answers3

1

You haven't pasted the markup that you are using right now but you could use a vertical flex box on the parent of BODY and FOOTER (in this example .container - note that it should have a height of 100vh) and have the footer occupy a fixed height and body with the background image would occupy the rest of the space automatically. You mentioned that Body and Footer are two div tags so I am assuming that .body is a class

body{
  padding: 0;
  margin: 0;
}

.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.body{
  display: flex;
  overflow: auto;
  flex: 1 1 auto; 
  background: url("https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg");
}

.footer{
  flex: 0 0 50px;
  background: black;
  opacity: 0.3;
}

.content{
  background: yellow;
  opacity: 0.6;
  width: 100%;
  color: black;
}
<div class="container">
  <div class="body">
    <div class="content">Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</div>
  </div>
  <div class="footer">
  </div>
</div>

Update: If you want content of .body to occupy 100% height of .body, use display: flex on body again!

takeradi
  • 3,661
  • 7
  • 29
  • 53
  • This works great! Thank you. . . I am a little concerned about browser compatibility. You think it is safe to use this? – LeeAlexander Jul 21 '16 at 17:57
  • absolutely. with the correct prefixes you can use flex. you can check http://caniuse.com/#search=flex to see which browsers it will support. we support IE 10 and above and we use flex a lot. – takeradi Jul 21 '16 at 18:02
  • Great! Man I didnt even know this site existed! Thank you – LeeAlexander Jul 21 '16 at 18:14
  • Absolutely. BTW you should accept answers that are correct or upvote them if you find them useful. This helps others looking to solve a similar kind of an issue. I believe the calc(100% - 50px) answer by Johaness would also have solved your problem. I like flex better because it makes the code more readable and less verbose. – takeradi Jul 21 '16 at 18:17
  • Ok I will do that, as you can see im new to this! I seem to be running into a new problem. Your method works well, but if I put a new div inside the body div, 100vh will not respect the container and go to full screen. Though it isn’t actually behind the footer. Footer is still clear, instead the image is going full screen but hidden. I need it to actually use that new body space as its full screen. I also noticed that 100% height doesn’t work only 100vh. Does that sound right? – LeeAlexander Jul 21 '16 at 20:25
  • you can. use `display: flex` on body again. Check the updated solution. you should read up more on flexbox and refer to this link: http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh – takeradi Jul 21 '16 at 20:39
  • Props on using flex. – zsawaf Jul 21 '16 at 20:40
0

Your overflow: auto; is that your problem ? Try

overflow: none;

Consider your margins padding and border

http://www.w3schools.com/css/css_boxmodel.asp

Minh
  • 341
  • 4
  • 12
0

You can set a content div (inside the body tag, which contains everything except the footer) to this height:

#my_content {
  height: calc(100% - 50px);
}

This will not overlap with the footer when it's 50px high.

Johannes
  • 64,305
  • 18
  • 73
  • 130