Question

我尝试放置3个填充窗口宽度的div，并且width根据窗口的尺寸进行更改。但是javascript似乎给出的窗口宽度大于实际导致对象流出窗口导致滚动的窗口宽度。您可以在此处查看我的完整代码：http://jsbin.com/vifagazefu/3/edit?html,css,js,output

这是javascript：

 $(window).resize( setDim());

function setDim() {
    var windowWidth = $(window).innerWidth()- 3; //the 3 is for the 1px margin between the divs

  var windowHeight = $(window).innerHeight() - 70;

  $(".one").innerWidth(windowWidth / 3);
  $(".two").innerWidth(windowWidth / 3);
  $(".three").innerWidth(windowWidth / 3);

  $(".one").innerHeight(windowHeight);
  $(".two").innerHeight(windowHeight);
  $(".three").innerHeight(windowHeight);
}

setDim();

Answer 1

只需添加$(document.body).innerWidth()-3;代替$(window).innerWidth()-3;，您就可以了。这是因为body元素有边距并且由浏览器设置，是的你可以将身体的边缘重置为0px，但为什么我们不能更准确地计算身体。

这是使用$(document.body).innerWidth()-3; http://jsbin.com/puqavufela/1/编辑的bin
这是使用body {margin:0px} http://jsbin.com/somogusugo/1/

编辑过的bin

如何使对象占另一个对象宽度的百分比

1 个答案: