0

OK so here's the code I have thus far.

var h = document.getElementById("main").offsetHeight;
 document.getElementById("sidebar1").style.height = h + "px";

It works in a standard layout, but I also need the height to readjust when the screen size changes the layout for example, going from portrait to landscape on a tablet or in a scenario where infinite scroll is involved, the sidebar height should increase I scroll down the page.

Any ideas?

Thanks

Chozen
  • 299
  • 1
  • 4
  • 18
  • This might help: http://stackoverflow.com/questions/13909864/100-height-left-sidebar-with-dynamic-right-content-bootstrap-wordpress – David Sherret Jan 20 '14 at 21:23

1 Answers1

0

Try this and see if it works. Window.onresize should cover the portrait to landscape change. Window.onscroll should cover the infinite scroll.

Window.onresize = resize;
Window.onscroll = resize;

function resize() {
  var node = document.getElementById("main");
  var h = window.getComputedStyle(node,null).height;
  document.getElementById("sidebar1").style.height = h;
};

The 'sidebar1' should match 'main'. The 'getComputedStyle' method is not supported in older IE(<9).

Chi Row
  • 1,106
  • 7
  • 18