0

This works, but I'm sure that it written more cleanly.

<script>
$(document).ready(function(){
  $('.col').css({'height':($(document).height())+'px'});
  $(window).resize(function() {
    $('.col').css({'height':($(document).height())+'px'});
  });
}
</script>

I've tried without the first $('.col').css... and it doesn't work. So basically what would I like to tell the browser is: "When document is ready, resize this div, and keep on resizing it on every height change".

isedev
  • 18,848
  • 3
  • 60
  • 59
user2192700
  • 9
  • 3
  • 1
    I don't see any way to significantly simplify the JS. You could explore CSS solutions. See here: http://stackoverflow.com/questions/289409/full-height-css-layout-with-multiple-columns and http://stackoverflow.com/questions/10239534/how-to-have-multiple-columns-that-consume-100-height-using-twitter-bootstrap. – jfriend00 Mar 20 '13 at 20:48
  • performance can be improved if you only trigger resize when the width changes – Huangism Mar 20 '13 at 21:01

2 Answers2

3

Here it is:

<script>
    $(window).resize(function() {
        $('.col').css({'height':($(document).height())+'px'});
    });
    $(function(){
        $(window).trigger('resize');
    });
</script>

You can listen to the resize event and trigger it when the document is ready.

Other small changes:

  • you can simplify document.ready with $(function(){})
  • the resize event listener could be created before document.ready, because the window object is always present and you can attach events to it as early as you need.
Haralan Dobrev
  • 7,617
  • 2
  • 48
  • 66
2

Or another variation, with a little bit (I guess) cleaner syntax:

$(window).resize(function() {
    $('.col').height($(document).height());
}).resize();
dfsq
  • 191,768
  • 25
  • 236
  • 258