爲什麼標題和內容達不到身體的寬度

我有下面的代碼一個奇怪的情況，我body寬度設置爲980px和我的標題和內容寬度設置爲100%所以他們應該在整個屏幕上，但在Firefox舒展他們只是短了幾個像素和鉻，他們只是達到了一半，怪異的是頁面正文覆蓋整個屏幕我檢查了爲body和整個頁面變黑，然後如何標題和內容可以與width:100% 。但是這段代碼在cssdesk cssdesk上正常工作，所以我的瀏覽器出了什麼問題。我的屏幕分辨率是1366x768。爲什麼標題和內容達不到身體的寬度

body { 
 
    width: 980px; 
 
    margin: 0; 
 
    background-color: #000; 
 
} 
 
.header { 
 
    color: #fff; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #F23F21; 
 
} 
 
#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%; 
 
}

<body> 
 
    <div class="header">This is header</div> 
 
    <div id="container"> 
 
    <div class="one"> 
 
    </div> 
 
    <div class="two"> 
 
    </div> 
 
    <div class="three"> 
 
    </div> 
 
    </div> 
 
</body>

來源

2015-11-06 bɪˈɡɪnə

身體不拉伸填滿屏幕。對於如何在body元素上處理背景顏色只有特殊規則（它用於爲視口本身着色）。

身體是你給它的寬度。該寬度比瀏覽器窗口窄。

其他所有內容都受到約束。

來源

2015-11-06 11:50:57 Quentin

此，見討論身體大小/顏色：http://stackoverflow.com/questions/11721574/css-applying-width-on-the-body – BobbyTables

謝謝，但你能解釋什麼人的意思是980px作爲頁面寬度的最佳選擇，他們是在談論設置寬度的內容RA那個身體？ –

他們正在談論內容的寬度。 – Quentin

你的身體

不要固定寬度，體內這裏創建一個div容器

我已修改了代碼檢查這一

<style> 
 
    body{} 
 
    .container{ 
 
    width:980px; 
 
    margin: 0; 
 
    background-color: #000; 
 
} 
 
.header{ 
 
    color:#fff; 
 
    margin: 0; 
 
\t width:100%; 
 
    height: 60px; 
 
    background-color:#F23F21; 
 
} 
 
#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%; 
 
} 
 

 
</style> 
 
<body> 
 
    <div class="container"> 
 
    <div class="header">This is header</div> 
 
<div id="container"> 
 
<div class="one"> 
 
</div> 
 
<div class="two"> 
 
</div> 
 
<div class="three"> 
 
</div> 
 
</div> 
 
    </div> 
 
</body>

來源

2015-11-06 11:55:47

爲什麼標題和內容達不到身體的寬度

回答

相關問題