css calc tests

by jpeter06

HTML

<button onclick="resize()" >resize</button>
<div id="cont">
<div id="div1">div1 fix 20px height</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div25">div2.5 fixed 40px height</div>
</div>

CSS

:root { --main-bg-color: brown; }
body,html{height:100%;width:100%;padding:0px;margin:0px;}
div{position:absolute}
#cont{width:80%;height:80%;position:absolute;top:50%;left:50%;transition: all 0.5s;
transform:translate(-50%,-50%);
}
#div1{ width:100%; height:20px;top:0px;left:0px;
    background:var(--main-bg-color)}
#div2{width:50%;height:calc(50% - 10px);top:calc(0% + 20px);left:0px;
background:green;}
#div25{width:50%;height:40px;top:calc(50% + 10px);left:0%;
background:yellow;}
#div3{width:50%;height:calc(50% - 50px);top:calc(50% + 50px);left:0px;
background:blue;}
#div4{width:50%;height:calc(100% - 20px);top:calc(0% + 20px);left:50%;
background:orange;}

JavaScript

function resize(){
	var div = document.querySelector('#cont');
  var newval=div.style.width=="50%"?"80%":"50%";
  div.style.width=newval;
  div.style.height=newval;
}