CODEWITHSUNDEEP
htmlcss
LeeAlexander
LeeAlexander

Reputation: 49

Footer displaying over body background

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

Upvotes: 1

Views: 2159

Answers (3)

takeradi
takeradi

Reputation: 3871

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!

Upvotes: 1

Johannes
Johannes

Reputation: 67788

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.

Upvotes: 0

Minh
Minh

Reputation: 361

Your overflow: auto; is that your problem ? Try

overflow: none;

Consider your margins padding and border

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

Upvotes: 0

Related Questions