Clicking the following link will open a new window, resize the window and see the layers dimensions change.
The layers dimensions will be a percentage of the window width or the default size whichever is the greater.
For this example the layer is set to be 60% of the windows width and 50% of the windows height.
The minimum width is set at 200 pixels and the minimum height is set at 150 pixels.
If the window is reduced in size to where 60% of the windows width is less than 200 pixels and/or 50% of the windows height is less than 150 pixels the layer will remain at a width of 200 pixels and a height of 150 pixels respectively.
<script type="text/javascript">
// Jeff
// www.huntingground.freeserve.co.uk
function chkSize(){
widthPercentage=60
minWidth=200
winWidth=(window.innerWidth?window.innerWidth:document.body.clientWidth)
winHeight=(window.innerHeight?window.innerHeight:document.body.clientHeight)
widthSize=Math.ceil(winWidth/100*widthPercentage)
document.getElementById("div1").style.width=widthSize
if(parseInt(document.getElementById("div1").style.width)<minWidth){
document.getElementById("div1").style.width=minWidth+"px"
}
heightPercentage=50
minHeight=150
heightSize=Math.ceil(winHeight/100*heightPercentage)
document.getElementById("div1").style.height=heightSize
if(parseInt(document.getElementById("div1").style.height)<minHeight){
document.getElementById("div1").style.height=minHeight+"px"
}
onresize=chkSize
onload=chkSize
</script>
<div id="div1"></div>
The following example keeps the spacing around the layer the same irrespective of window size.
The spacing is denoted by the left & top position although the right & bottom spacing can be set seperately.
<script type="text/javascript">
// Jeff
// www.huntingground.freeserve.co.uk
function chk(){
myDiv=document.getElementById("div1")
leftSpace=document.getElementById("div1").offsetLeft
rightSpace=leftSpace
topSpace=document.getElementById("div1").offsetTop
bottomSpace=topSpace
myDiv.style.width=document.body.clientWidth - leftSpace - rightSpace
myDiv.style.height=document.body.clientHeight - topSpace - bottomSpace
}
onresize=chk
onload=chk
</script>
<style type="text/css">
<!--
#example{
position:absolute;
left:50px;
top:50px;
color:#404000;
border:2px solid #808080;
background:#8e8462;
overflow:auto;
}
-->
</style>
<div id="example"></div>