Question

我正在尝试根据浏览器的高度和宽度调整div的大小。 div应该在开头是空的，并且应该总是使用ONLY 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

检查fidde 我使用了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（ '待办事项'），100,50）;

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

3 个答案: