空白的網頁

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.