HTML頭不正確的寬度

這裏走出來的我有我的網頁的計劃：600×800個像素HTML頭不正確的寬度

車身寬度x高度;沒有襯墊，因此如果它們沒有邊距，它裏面的元素可以緊貼在牆上。
身體內的3個元素：標題，主要內容和頁腳，這些都被視爲類（因爲我將在我的網站的多個頁面上使用相同的佈局）。
3個元素的寬度將分別爲598像素，邊距爲0像素，邊框爲1像素，因此它們完全適合身體。邊框將虛線以添加視覺上下文。
這3個元素'將通過150,500和150各自的像素來劃分身體的高度。它們的1像素底部/頂部邊框將重疊。因此頁面的垂直空間將是頂部的1像素邊界，148個像素的空間，1個邊界像素，499個像素的空間，1個邊界像素，149個像素的空間以及最後1個邊界像素底部。

如果可以，請向我解釋我在執行HTML邏輯時出錯的地方。預覽頁面時，我的標題不是正確的寬度。（顯然，我的網頁去看看多彩的和動態的，當我完成它。現在我只是試圖讓佈局正確的。）

<html> 

<head> 
    <title>div practice</title> 
    <style type="text/css"> 
     body 
     { 
      padding: 0px; 
      height: 800px; 
      width: 600px; 
     } 
     .header 
     { 
      margin: 0px; 
      border: 1px dashed; 
      width: 598 px; 
      height: 148px; 
      position: absolute; 
      top: 0px; 
      left: 0px; 
     } 
     .mainContent 
     { 
      margin: 0px; 
      border: 1px dashed; 
      width: 598px; 
      height: 500px; 
      position: absolute; 
      top: 148px; 
      left: 0px; 
     } 
     .footer 
     { 
      margin: 0px; 
      border: 1px dashed; 
      width: 598px; 
      height: 148px; 
      position: absolute; 
      top: 648px; 
      left: 0px; 
     } 
    </style> 
</head> 

<body> 
    <div class="header"> 
     <p>This is where the header goes</p> 
    </div> 
    <div class="mainContent"> 
     <p>This where the main content goes</p> 
    </div> 
    <div class="footer"> 
     <p>This is where the footer goes</p>  
    </div> 
</body> 

</html>

來源

2014-03-26 user3461018

1，請永遠不要把一個高度爲您的內容，這一點都不好，會給你帶來問題。 – SULTAN

如果我可能會問什麼問題？ – user3461018

，因爲如果您的內容會超出您定義的高度，則會覆蓋您的樣式。看到這個例子：http://jsfiddle.net/salota8550/F7rF6/ – SULTAN

在你.header款式變化width: 598 px;到width: 598px;

598 px不是有效的屬性值，所以它被忽略。刪除空間，它應該按預期工作。

此外，如果你加入這行代碼：

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

這將改變盒模型，使填充和邊框都從指定的寬度減去，而不是添加到它。現在它是一種流行的技術，因爲它可以使數學減少頭痛，有利於響應式設計。使用這種風格，您可以用width: 600px;定義標題，並在不影響寬度的情況下仍然添加所需的任何border和padding。

來源

2014-03-26 17:34:55 Ennui

作爲一個計劃，我寧願以下幾點：

1）使您body寬度100％

body{ 
width: 100%; 
}

2）添加outterWrapper div來容納你所有的頁面元素。

.outterWrapper{ 
    width: 600px; // your page width; 
    margin: 0 auto; // to center in page 
    border: 1px solid #000; // if you need a border 
}

3）啓動風格的標題，內容，頁腳的div

.header, .footer, .content{ 
width: 100%; 
padding: 5px; 
margin-bottom: 10px; 
} 

.header, .footer{ 
background-color: #cfe09b; 
} 
.footer{ 
    margin-bottom: 0; 
} 
.content{ 
background-color: #89ccca; 
}

你可以明白我的意思在這裏>>http://jsfiddle.net/salota8550/EPsk2/

來源

2014-03-26 18:06:15 SULTAN

HTML頭不正確的寬度

回答

相關問題