Margin does not work only in Safari (the element is at the bottom of the page)

Question

Please check the following link in the latest safari: http://www.grupoguion.com/

The footer is fixed at the bottom and is extruded by scrolling, so in the previous section there is a bottom edge, but it does not work, only in Safari. Everything is in order everywhere, even in IE I tried to add overflow: auto in the page wrapper, but everything becomes strange in all browsers when the elements disappear and appear. I also read that removing the height: 100% in the body and html can fix this, but this is not an option for me, because I need images to fix the height of the browser.

Does anyone have any other possible solution?

Thanks in advance.

Answer 1

You can add a div with the size of your bottom and make it transparent. HTML:

<div id='tr-footer'> </div> 

css:

 #tr-footer{ height: ?px; width:100%; background:transparent; } 

Answer 2

The accepted answer is too complicated. Consider this approach ( taken from another thread ):

This is normal weird behavior leading to a margin crash. To simply avoid this, add overflow: auto; into the container [footer].

The footer container might look something like this:

 .footer-container { overflow: auto; } 

Answer 3

Try to make an element

 display:inline-block 

and Safari must respect its size and margin.