Question

在下面的代码中，我将页面宽度设置为980px，并在右侧显示一些空格，在将body宽度设置为1050px时会消失。我的屏幕分辨率为1366x768，我读过大多数网站的宽度为950px到980px，大多数网站都像facebook一样完全适合我的屏幕，那么为什么我的980px在右边有空格。

＆＃13;

body {
  width: 980px;
  overflow: scroll;
}
#container {
  width: 100%;
}
.one {
  height: 200px;
  float: left;
  border: 1px solid red;
  width: 25%;
  box-sizing: border-box;
}
.two {
  height: 200px;
  display: inline-block;
  border: 1px solid blue;
  box-sizing: border-box;
  width: 50%;
}
.three {
  height: 200px;
  float: right;
  border: 1px solid green;
  box-sizing: border-box;
  width: 25%;
}

＆＃13;

<div id="container">
  <div class="one">this is first block
  </div>
  <div class="two">the content changes it's position on zooming in
  </div>
  <div class="three">Is there any way to keep it as it is with a scroll bar
  </div>
</div>

＆＃13;

Answer 1

您是否尝试将html或body的边距设置为0？

像：

html, body {
  margin: 0;
}

JSFiddle

编辑：空格是为html设置为默认值的页边距，因此如果您希望页面为＆＃34;无边距＆＃34;，则只需设置页边距html（和身体的安全，你现在从来没有不同的浏览器会做什么）到0。

Answer 2

尝试取消宽度，看看会发生什么。我没有在我制作的任何页面上设置页面宽度，它工作正常。现在，如果我有一个表格，一个影子箱，但是我设置了尺寸，但我没有指定页面宽度。也许只是评论它刷新看看会发生什么。

网页侧面的空白

2 个答案: