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

Question

我正在尝试根据浏览器的高度和宽度调整div的大小。 div开头应该是空的，并且只能使用javascript保持100％的宽度和50％的高度。

这是代码，在这种情况下，我使用screen.availHeight和screen.availWidth，仅在全屏模式下可以使用。

 /* 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

选中此字段，我已使用window.innerWidth和window.innerHeight获取视图区域的高度和宽度。 如果要使用clientWidth和clientHeight，则需要将HTML和BODY元素的高度设置为100％，以便它们占用视口的全部高度，并可以从中计算出50％的高度。

 /* 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

在这种情况下，使用JS是多余的。 可以使用以下CSS来完成：

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

Answer 3

这应该工作：

AdaptToScreen（document.getElementById（'to-do'），100,50）;