Tag Archives: jQuery

100% min-height div with jQuery

Posted on by arch1000
1

The following jQuery script would apply the minimum height of 100% to any div and will refresh this value when the window is re-sized.

This script will have no effect if the content of the div is larger than 100% widow height.

// 100 percent height
$(document).ready(function() {
   var h = $(window).height();
      $("#event-details .day").css("min-height", h);
      $(window).resize(function() {
         var xh = $(window).height();
         $("#event-details .day").css("min-height", xh);
   });
});

Disclaimer:

I had a hard time finding any relevant jQuery solutions online, and after a few hours of googling I attempted writing my own script.

Thus, if the script is erroneous in any way please let me know and I’ll be happy to update it.

So far, it works well for me here: www.ottawaarchitectureweek.com  (see events page)