Однако упорно не получается запускать код на форуме. В чём его опасность.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var r=document.all;
function razm(){
var hi=parseInt(r.vid.clientWidth);
var hei=parseInt(r.vid.clientHeight);
if (hi>=hei){
r.vod.style.left=0;
r.vod.style.width=hi+'px';
r.vod.style.height=hi/1.5+'px';
r.vod.style.top=(hei/2-hi/3)+'px';
var ho=parseInt(r.vod.style.height);
if(ho>=hei){
r.vod.style.height=hei+'px';
r.vod.style.width=(hei*1.5)+'px';
r.vod.style.top=0+'px';
r.vod.style.left=((hi-(hei*1.5))/2)+'px';}
r.vyd.style.top=0;
var ha=parseInt(r.vod.style.width);
r.vad.style.width=ha/1.5+'px';
r.vad.style.height=ha/1.5+'px';
r.vad.style.left=0;
r.vyd.style.width=ha/3+'px';
r.vyd.style.height=ha/1.5+'px';
r.vyd.style.left=ha/1.5+'px';
r.lst.style.top=ha/3+'px';
r.lst.style.left=0;
}else{
r.vod.style.top=0;
r.vod.style.height=hei+'px';
r.vod.style.width=hei/1.5+'px';
r.vod.style.left=(hi/2-hei/3)+'px';
var hia=parseInt(r.vod.style.width)
if(hia>=hi){
r.vod.style.width=hi+'px';
r.vod.style.height=(hi*1.5)+'px';
r.vod.style.left=0;
r.vod.style.top=((hei-(hi*1.5))/2)+'px';
}
var hio=parseInt(r.vod.style.height)
r.vad.style.width=hio/1.5+'px';
r.vad.style.height=hio/1.5+'px';
r.vad.style.left=0;
r.vyd.style.width=hio/1.5+'px';
r.vyd.style.height=hio/3+'px';
r.vyd.style.left=0;
r.vyd.style.top=hio/1.5+'px';
r.lst.style.top=0;
r.lst.style.left=hio/3+'px';
}
iz=parseInt(r.vad.style.width);
r.zag.style.width=iz/2+'px';
r.zag.style.height=iz/2+'px';
r.zag.style.left=0;
r.lst.style.width=iz/2+'px';
r.lst.style.height=iz/2+'px';
r.vad.style.fontSize=iz/10+'pt';
r.zag.style.fontSize=iz/30+'pt';
r.lst.style.fontSize=iz/60+'pt';
}
</script>
<style>
#vid {position:absolute;
top:0;
left:0;
height:100%;
width:100%;
margin: 0;
overflow: hidden;
text-align: center
}
#vod{background: rgb(200,200,255);
position: absolute;
margin: 0;
overflow: hidden;
}
#vad{background: rgb(255,200,200);
position: absolute;
margin: 0;
overflow: visible;
}
#vyd{
position: absolute;
background: rgb(187,219,206);
color:rgb(0,0,0);
}
#zag{
position: absolute;
border-color:#ffff00;
border-style:solid;
border-width:1px;
}
#lst{background: rgb(100,200,0);
position: absolute;
border-color:#ffff00;
border-style:solid;
border-width:1px;
}
</style>
</head>
<body onload='razm()'onresize='razm()' onmousemove="getMouseCoords(event)">
<div id="vid" >
<div id="vod" >
<div id="vad" >ОСНОВНОЕ ПОЛЕ<br>Для видео или для полотна canvas</div>
<div id="vyd" >
<div id="zag" >Первое служебное<br> поле</div>
<div id="lst" >Второе служебное поле</div>
</div>
</div>
</div>
</body>