根据高度和宽度调整div的大小

Question

I'm trying to resize a div according to the height and width of the browser. The div is supposed to be empty at the beginning and should always mantain a width of 100% and a height of 50% using ONLY javascript.

Here's the code, in this case I used screen.availHeight and screen.availWidth which is fine only in full screen mode.

 /* pw stand for width percentage ph for height percentage */ var adaptToScreen = function(el,pw,ph){ var screenW = screen.availWidth; var screenH = screen.availHeight; var w = screenW*(pw/100); var h = screenH*(ph/100); el.style.height=h+"px"; el.style.width=w+"px"; }; adaptToScreen(toDoList,100,50); 

  <div id="to-do"></div> 

Answer 1

Check this fidde I've used window.innerWidth and window.innerHeight to get height and width of view area. if you want to use clientWidth and clientHeight you need to set height of HTML and BODY element to 100% so that they consume full height of viewport and 50% height can be calculated from that.

 /* pw stand for width percentage ph for haight percentage */ var adaptToScreen = function(el,pw,ph){ //var screenW = document.body.clientWidth; //var screenH = document.body.clientHeight; var screenW = window.innerWidth; var screenH = window.innerHeight; var w = screenW*(pw/100); var h = screenH*(ph/100); el.style.height=h+"px"; el.style.width=w+"px"; }; var toDoList = document.getElementById('to-do'); adaptToScreen(toDoList,100,50); 

  <div id="to-do"></div> 

Answer 2

The use of JS in this case is redundant. It can be accomplished with the following CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#to-do {
    height: 50%;
    width: 100%;
}

Answer 3

This should work:

adaptToScreen(document.getElementById('to-do'),100,50);