Помогите разобраться с onload
 

Здравствуйте. Помогите разобраться с onload.

У меня есть два блока на сайте sidebar и main_container.
Sidebar шириной 200 пикселей, задается в css.

А main_container ширина не указана, но при загрузке страницы, его ширина задается скриптом. и рассчитывается так body.clientWidth - 200.

Допустим экран шириной 1000 пикселей, значит main_container будет 800 п.

Далее, браузер автоматически рассчитывает высоту исходя из количества контента в них.

Допустим в main_container много текста, и при ширине 800п он получает высоту 1200п.

Следующий шаг, скрипт задает высоту для sidebar такую же как и для контейнера, если контейнер получился 1200 п, то и sidebar будет 1200 п.



Но проблема в следущем, когда страница загружается, и срабатывает onload, который задает все величины, то он почему то видит что ширина контейнера не 800п а все 1000, и высота соответственно не 1200, а 900п.

Но самое главное, что далее то видно что контейнер подгрузился нормально, принял высоту ширину 800п и высоту 1200п., а sidebar так и остался 900п.

ХОТЯ, в коде явно указано, что сначала он изменяет ширину контейнера, и получает его высоту, а затем уже эту высоту применяет к sidebar. Вот код скрипта

var bodyH = document.body.clientHeight;
	var bodyW = document.body.clientWidth;
	var containerH = document.getElementById('main_container').clientHeight;
	var sidebarH = document.getElementById('sidebar').clientHeight;
	
	bodyW = bodyW - 225 - 50;
	document.getElementById('main_container').style.width = bodyW + 'px';
	
	bodyH = bodyH - 30;
	if(containerH < bodyH) { containerH = bodyH; document.getElementById('main_container').style.height = bodyH + 'px'; }
	bodyH = bodyH + 30;
	sidebarH = containerH;
	alert(containerH);
	if(bodyH > sidebarH) sidebarH = bodyH;
	document.getElementById('sidebar').style.height = sidebarH + 'px';

Выше я привел код функции main, которая запускается событиями onload и onresize.

При onload, получается та проблема которую я описал выше, как буд то какой то элемент не успевает подгрузиться во время выполнения скрипта.

А при событии onresize, все работает четко, все величины рассчитываются как нужно.

Все просто: для верстки нужно использовать CSS, а не JS!
Я как верстальщик с очень неплохим стажем, скажу прямо - еще ни разу за свою практику не пришлость втыкать костыли на js (ну разве что кроме position: sticky эмуляции) - практически все решается через css

У меня малый стаж, и не могу до сих пор найти решения как сделать блоки одинаковой высоты, везде либо скриптами предлагают, либо таблицами.

Да и к тому же, скриптами можно более точно настроить размеры.

Допустим ширина родительского блока 1000п.
Внутри него создаем блок с width: 100% и padding: 100п.

Как сделать, чтобы ширина блока получилась именно 800п, а вместе с отступами слева и справа 1000?

Дык если блок не float, то просто задать паддинг, а ширину оставить auto. Блок автоматом примет всю доступную ширину.
Ну а если случай не тот, то:
box-sizing: border-box плюс продублировать с -webkit- и -moz-

Как вариант можно через display:table-cell.

Вобще без макета сложно что-то сказать. Нужен макет или ссылка на текущую верстку.