javascript - 多页面模板上的 jQuery 移动滚动/页面 chop 问题

Question

出现页面/屏幕被 chop 的奇怪问题。

当您点击下面的这个屏幕(较短)然后点击返回并进入另一个较长的屏幕时，似乎会发生这种情况。滚动条没有出现，所以页面被 chop 了。在 Chrome v36 和 iOS Safari 中测试。

http://onegreenthing.net/sunsuper/RetirementModeller/Forecast.html#retirement-age

有什么想法吗？

PS:调整窗口大小使其像宽度一样移动(例如 400 像素宽)

Answer 1

.the-thing:before {
    content: "";
    display: block;
    height: 0;
    padding-top: 56.25%;
}

如果页面内容自然高于视口(viewport)，则闻起来像伪垂直居中，不会重新计算以适当消失。

评论后更新 - 试试这个:

if( $(document).height() >  $(window).height() ) {
  $(".the-thing").remove();
}

后评论#2 - 你的主容器元素有这个 css(对于 id='retirement-age'):

.ui-mobile .ui-page {
    min-height: 300px;
}

如果我将窗口拉起短于 300 - 我得到的是无滚动的东西 - 不是错误 - 这是正确的。