Hi, I have a testcase (you can see it in this link). I'm trying to make div #bottom to extend its height to the end of the page. As you can see, the #wrapper div is already 100% height, but if I try to use height or min-height: 100% in the #bottom layer, unnecessary scrollbars appear.

How can I do it avoiding the use of javascript to calculate the remaining height?

1 answer

Sisira 95

You can achieve this easily by jquery. Put the following code in the head. You can also download the jquery and give ur local path of jquery core file. I am actually deducted 20 as u have put the top margin of the bottom div as 20px.

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

    var x = $(document).height();
    actualheight = x - 20;
    var y = $("div#top").height();
    var z = actualheight - y;
      $("div#bottom").css({'height' : z });
Answered over 8 years ago by Sisira