Question

我根据父div的高度计算div的高度，但是当我刷新页面时它会搞砸。

这是javascript的简化版本：

$(function() {
  var containerHeight = $('#container').height();
  if ($('#toolbar').length) {
    $('#content').css({'height' : containerHeight - 120});
  } else {
    $('#content').css({'height' : containerHeight});
  };
});

这是html的粗略概念：

<div id="container" style="height: 90%;">
  <div id="content" style="overflow-x:scroll;">stuff here</div>
  <div id="toolbar">stuff here</div><!-- toolbar height is 120px and only rendered on some pages -->
</div>

在第一页加载时，一切正常。所有内容都包含在内容div中，并带有滚动条。但是，如果我刷新页面，内容div将不会一直滚动到其实际内容的底部。我在Chrome和Safari中使用过它。我错过了一些非常简单的东西吗？

Answer 1

也许它的内容有缓存和页面中加载的顺序？你在哪里调用这个功能？尝试从$（document）.ready（function（）{...}）或其他内容中调用它

Answer 2

我不知道如何或为什么，但是重写了html＆amp; javascript让它工作。这是javascript。

$(document).ready(function() {
  var contentHeight = $('#content').height();
  if ($('#new_comment').length) {
    $('#viewport').css({'height' : contentHeight - 120});
  } else {
    $('#viewport').css({'height' : contentHeight});
  };
});

为什么这个javascript高度计算在刷新页面时会中断，但是在第一次加载时却没有？

2 个答案: