CSS относительное позиционирование

Question

Я занимаюсь разработкой веб-страницы с динамическими размерами, т. Е. Сначала читаю размер холста и соответствующим образом корректирую ширину и высоту элементов.

if(!window.JSFX)
    JSFX=new Object();

if(!JSFX.Browser)
    JSFX.Browser = new Object();

if(navigator.appName.indexOf("Netscape") != -1)
{
    JSFX.Browser.getCanvasWidth = function() {return innerWidth;}
    JSFX.Browser.getCanvasHeight    = function() {return innerHeight;}
}
else    if(document.all)    {
    JSFX.Browser.getCanvasWidth = function() {return document.body.clientWidth;}
    JSFX.Browser.getCanvasHeight    = function() {return document.body.clientHeight;}
}

function f(){
var h = JSFX.Browser.getCanvasHeight();
var w = JSFX.Browser.getCanvasWidth();
var elem1 = document.getElementById("left");
var elem2 = document.getElementById("right");

if(h){
elem1.style.height = (h-115)+"px";
elem2.style.height = (h-95)+"px";
elem2.style.width = (w-305)+"px";
} 
else return false; 
 } 

window.onload = f;

// HTML

<div id="container">
           <div id="left">
           </div>

           <div id="right">
           </div> 
</div>

Моя проблема в том, что когда я изменяю размер окна, дивы перепрыгивают повсюду. Мне нужна помощь с CSS и JavaScript, которые я могу использовать для изменения размеров div-ов при изменении размеров окна.

Спасибо.

Answer 1

"позицию: абсолютная" и / или "Позиция: фиксированный"

Answer 2

Я думаю, что у объекта window есть событие resize, которое срабатывает, когда пользователь изменяет размер своего браузера.

Итак, возможно, добавьте это в конец вашего кода JavaScript:

window.onresize = f;