页面底部在 Safari 中被截断

Question

I can't figure out why this page: http://wohf.squarespace.com/newsletter/ gets cut off at the bottom in safari, seems to work fine in all other browsers (as far as I found so far)!!

I am using some jquery and css for the sidebar and the content to match heights and for the canvas to run top to bottom with the footer always at the very bottom of the page. everything is working (as far as I can tell so far) on the rest of the site, the problem is only on this newsletter page and only in safari.

Can anyone see the problem?

Here is the jQuery I am using:

    //***************************************
    // Position Elements on Newsletter Page
    //***************************************
    // Clear previously specified heights
    $("#modulePage6177253, #modulePage6177253 #canvasWrapper, #modulePage6177253 #canvas").height('auto');

    $("#moduleContentWrapper6177535").insertBefore("#modulePage6177253 #pageBodyWrapper");
    $("#moduleContentWrapper6177544").appendTo("#modulePage6177253 #pageFooterWrapper");
    $("#modulePage6177253 #pageFooterWrapper").insertAfter("#modulePage6177253 #canvasWrapper");

    equalHeight($("#modulePage6177253 #sidebar1, #modulePage6177253 #content"));
    equalHeight($("#modulePage6177253, #modulePage6177253 #canvasWrapper, #modulePage6177253 #canvas"));

    $("#modulePage6177253 #canvasWrapper").css("margin-bottom", "-100px");

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}

Answer 1

It is cut off in Firefox for me, but look at your CSS you have overflow: hidden styles everywhere. I would start by removing those.

Answer 2

window.navigator.platform === 'iPhone' ? true:false

then on the div's style try adding

paddingBottom:window.navigator.platform === 'iPhone' ? '15vh':'0vh' into your inline style for that element.

for react.js it would look like

PAGE CONTENT HERE