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

Question

我试图放置 3 个填充 window 宽度的 div，它们的 width 根据 window 的尺寸变化。但是 javascript 似乎给出了比实际宽度更大的 window 宽度，这导致对象从 window 中流出，从而导致滚动。你可以在这里看到我的完整代码：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 元素有边距，它是由浏览器设置的，是的，你可以将 body 的边距重置为 0px，但为什么我们不更准确地计算 body。

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

编辑的 bin

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

How to make objects a percentage of the width of another

javascript

jquery

height

width