Javascript-在窗口调整大小上垂直调整两个div的大小

Question

There are two divs vertically having unequal height. The minimum height of each div can be 40px .

When i resize the browser window, I want the divs to resize maintaining the aspect ratio.

I have created a demo in JSBIN . It works but it gets into Maximum call stack .

function divideEqually(h1, h2, diff) {
    let threshold = 40;
    let diffSplit = diff / 2;
    let leftOut1 = 0,
        leftOut2 = 0,
        leftOut = 0;

    if (h1 != threshold) {
        h1 = h1 + diffSplit;
    } else {
        leftOut1 = diffSplit;
    }
    if (h2 != threshold) {
        h2 = h2 + diffSplit;
    } else {
        leftOut2 = diffSplit;
    }

    diff = 0;
    if (h1 < threshold) {
        leftOut1 = threshold - h1;
        h1 = threshold;
    }
    if (h2 < threshold) {
        leftOut2 = threshold - h2;
        h2 = threshold;
    }

    diff = Math.ceil(leftOut1 + leftOut2);
    // error margin
    if (Math.abs(diff) > 0.5) {
        return divideEqually(h1, h2, diff);
    }
    return {
        h1: h1,
        h2: h2
    };
}

const qs = handle => document.querySelector(handle)
let initialHeight = window.innerHeight;

window.addEventListener('resize',()=>{
    const newHeight = window.innerHeight;
    const changeInHeight = newHeight - initialHeight;

    const h1 = qs("#top");
    const h2 = qs("#bottom")
    const h = divideEqually(h1.clientHeight,h2.clientHeight,changeInHeight);
    initialHeight = newHeight;

    h1.style.height = h.h1 + "px";
    h2.style.height = h.h2 + "px";

    // debug
    h1.innerHTML = h.h1;
    h2.innerHTML = h.h2;
})

Is their any better way of doing this or optimising the function ?

Answer 1

No need for Javascript; modern browsers have got you covered. Just add the flex property to the div s' CSS. This example gives the div sa 65/35 split.

 #container { display: flex; flex-direction: column; height: 100vh; } #top { flex: 65 0 0%; min-height: 40px; width: 200px; background: red; } #bottom { flex: 35 0 0%; min-height: 40px; width: 200px; background: orange; } 

 <div id="container"> <div id="top"></div> <div id="bottom"></div> </div>