CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxsafari
Zach Both
Zach Both

Reputation: 119

Margin bottom on absolute positioned div working in Chrome but not Safari or Firefox

I have a site that as you scroll to the bottom of the content a "hidden footer" is revealed underneath the main content. The main content needs to be absolute positioned (as it is part of a larger "thing") and the footer needs a negative z-index and fixed position to have the right effect.

The thing is I got everything to work perfectly in Google Chrome, however the margin-bottom on the main content to reveal the footer does not work in Safari or Firefox. What gives?

I've tried the answers given in other questions (including a spacer div or various wrapper divs). Some of these solutions fix the ability to see the footer, however all of them now remove the ability to click on the links in the low z-index footer as they are now "covered" by a transparent div on top.

Here is a JSFiddle that shows the functionality (if you open in Chrome) and the problem (if you open in Safari or Firefox): https://jsfiddle.net/3npkmy6f/3/

Any help would be appreciated.

HTML:

<div class="main" style=""></div>
<div class="hidden-footer">
  <a href="http://google.com">THIS IS A LINK</a>
</div>

CSS:

.main {
  height: 200%;
  position: absolute;
  width: 100%;
  background-image: url("http://lorempixel.com/600/300/sports/1/");
  margin-bottom: 400px;
 }

 a {
  color: red;
  margin-top: 200px;
  left: 50%;
  display: block;
  text-align: center;
  font-size: 50px;
  margin-left: -25px;
 }

 .hidden-footer {
   width: 100%;
   background-image: url("http://lorempixel.com/400/200/");
   height: 400px;
   position: fixed;
   bottom: 0px;
   z-index: -2;
   display: block;
  }

Upvotes: 4

Views: 1397

Answers (1)

Bolo
Bolo

Reputation: 61

Here is a solution with a wrapper and a spacer. https://jsfiddle.net/Boloeng/3npkmy6f/11/

<div class="wrapper">
  <div class="main" style="">

  </div>
</div>
<div class="spacer">

</div>
<div class="hidden-footer">
  <a href="http://google.com">THIS IS A LINK</a>
</div>

However, bottom margin on absolute elements is probably something not specified (that would explain the different behaviors). So I would avoid this kind of approach.

Upvotes: 0

Related Questions