如何在两个div之间设置侧边栏，它应基于调整大小而适合任何浏览器窗口

Question

I am having two grid one div is header another one is footer between the two grid, I am using sidebar in left side.

Here is my JavaScript code

function resize()
{
    var heights = window.innerHeight;
    document.getElementById("left").style.height = heights + "px";
}
resize();
window.onresize = function() {
    resize();
};

I want to show this full content with in the page without show any browser scroll bar.

Here is my demo

Click here to see my demo

Answer 1

Using Jquery:

You take the browser screen height

$(window).height()

& then reduce the height of header & footer

$(window).height() - $('header').outerHeight() - $('footer').outerHeight()

Using JS

window.innerWidth - document.getElementById('header').offsetHeight - document.getElementById('footer').offsetHeight;

Instead of offsetHeight you can also use clientHeight. Difference is:

clientHeight includes padding.

offsetHeight includes padding, scrollBar and borders.

Updated

Update your function resize() as:

document.getElementById('inner').style.maxHeight = window.innerWidth - document.getElementById('header').offsetHeight - document.getElementById('footer').offsetHeight;

Answer 2

You can use pure CSS: there are a few ways to determine the behavior of CSS to adjust to screen size. I think that a good method for this is to use the viewport units: vw and vh , this will let you achieve responsive design easily...

vw stands for "viewport width" and vh is for "viewport height". and, you can use it with CSS like in this example:

div {
width: 100vw;
height: 100vh;
}

This guide may be helpful to understand this method better...

You can also set px for pixels and other CSS sizing units instead of % and also use vmin and vmax for minimum and maximum size adjustment, or just use min-height/width like in this example:

.sidebar {
min-width: 30%;
min-height: 30%;
}

Another more modern way is to do it with flexbox ...