空白的网页

Question

的一侧在下面的代码我已经页面的宽度设置为980px然后就会出现一些空白在右侧，其上消失body宽度设置为1050px。我的屏幕分辨率是1366x768，我读过大多数网站都有950px到980px宽度，大多数网站如Facebook完全适合我的屏幕，为什么我的980px在右侧有空白区域。

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%; 
 
}

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

Answer 1

试试设置宽度看看会发生什么。我不设置任何页面上的页面宽度，它工作正常。现在如果我有一个表格一个表格一个阴影盒等不适当的尺寸，但我没有指定一个页面宽度。也许只是刷新刷新看看会发生什么。

Answer 2

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

像：

html, body { 
    margin: 0; 
} 

JSFiddle

编辑：白色空间是被设置为默认的HTML，所以如果你想你的网页是“无国界”保证金，只需需要设置html的边距（并且为了保证身体的安全，你现在从来没有什么不同的浏览器会这样做）为0.