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
0
points

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>
<script>

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