Question

我正在隐藏.contact div屏幕，如下所示：

#contact {
  position: absolute;
  box-sizing:border-box;
  width:100%;
  top:100%;
  z-index: 10;
  background: $sdpblack;
  padding: $gutter;

  /* Media query for handheld devices */
  @include max-screen($palm) {
     height:100%;
     display:table;
     padding-left:0; //Because we just switched to table display
  }
}

当用户单击按钮时，我使用jQuery将表单滑动如下：

$scope.contactIsUp = false;
$scope.toggleContact = function( event ) {
    speedup = 500;
    speeddown = 300;
    if ( $scope.contactIsUp ) { //lowering
        $('#contact').animate({'margin-top':0},speeddown, function(){ //who cares });
    } else { //raising
        var height = $('#contact').outerHeight();
        alert('css height: '+$('#contact').css('height'));
        alert('height: '+height);
        alert( 'window.outerHeight: '+$(window).outerHeight() );
        alert( 'window.innerHeight: '+$(window).innerHeight() );
        $('#contact').animate({'margin-top':'-='+height},speedup);
        $scope.contactIsUp = true;
    }
    event.preventDefault();
}

我使用否定margin-top将div带入视图，因为最终位置因屏幕大小而异。在桌面上，div位于窗口的底部边缘。在智能手机上，它从上到下填充屏幕。

问题：在iPhone上，联系表单从顶部向上滑动36px。这在iPad上似乎不是问题。

为什么会发生这种情况，我该如何解决？

注意：我确实不想诉诸嗅探客户端。伊克！

Answer 1

罪魁祸首是盒子大小：border-box;

箱上浆：边界框;如果你的css没有边缘或填充物会使你的身体在窗户限制之外伸展，那么这并不是必需的。这是一个很好的工具，但如果你的css很干净，你真的不需要它。我把它拿出来，确保没有任何填充或边距溢出窗户限制。我使用translate3d（）而不是top：100％。硬件加速了滑动等动画，使它们看起来更好。

如何在高度适合DIV：iPhone上100％

1 个答案: