Динамическая ширина контента

[Quark_]

Ситуация: сайт в две колонки (left 70% и right 30%). Задача была сделать так, чтобы когда справа заканчивались блоки, то left становился 100% т.е. контент расширялся на ширину рабочей области шаблона.
Я нашел только такой вариант:

$(document).ready(function(){
$(window).scroll(function(){
	var top = $(this).scrollTop();
	if (top > 750) {
		$('.left').addClass('wide');
		$('.right').addClass('none');
	} else {
		$('.left').removeClass('wide');
		$('.right').removeClass('none');
	}
});
});

и далее стилями...

Но теперь высота в 750px не актуальна т.к. на разных страницах - разное количество баннеров в правой колонке.
Как словить, например выход div id="last" (который будет последним) за пределы видимости окна браузера и после этого накинуть классы?

[Lemme]

window.onscroll = function() {
    var right = document.querySelector('.right');
	var left = document.querySelector('.left');
    
	if(pageYOffset >= right.offsetHeight) {
    	left.classList.add('wide');
    }
    else if (left.classList.contains('wide')) {
        left.classList.remove('wide');
    }
}

[Quark_]

Delete.
Все работает, спс.

[krasovsky]

Лучше для такого использовать css media queries. Но у него есть определенные ограничения в кроссбраузерности.

[Lemme]

krasovsky, на media queries такое не провернешь. Если не прав, то буду рад примеру=)