Question

I’m setting the height of a div based on a calculation from the height of a parent div, but it screws up when I refresh the page.

Here’s a simplified version of the javascript:

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

Here’s a rough idea of the 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>

On the first page load, everything works fine. All the content is contained in the content div with a scroll. However if I refresh the page the content div will not scroll all the way to the bottom of its actual content. I’ve worked with it in Chrome and Safari. Am I missing something really simple?

Answer 1

I don’t know how or why, but a rework of the html & javascript got it working. Here’s the javascript.

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