使div占用頁面的整個寬度

Question

我正在一個小型網站上工作。 為了更易於閱讀，我將網站的所有內容都放在中間。

body {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

問題在於div遵循此規則，並且僅位於最中央。

在此處輸入圖片說明

在頁腳類中，我嘗試通過將邊距和寬度設置為100％來重置它們，但這沒有用。

.footer {
  width: 100%;
  margin-left: 0%;
  margin-right: 100%;
}

密碼筆

Answer 1

無需將整個body設置為500px寬度，而是為主要內容創建一個div ，然后將頁腳放在下面。

 #content { width: 500px; margin-left: auto; margin-right: auto; }

 <body> <div id="content"> <!-- Main page content here --> </div> <div id="footer"> <!-- Footer content here --> </div> </body>

Answer 2

將.footer元素放置在.footer元素之外：

這里的例子

在這種情況下，請使用body以外的元素作為包裝器/容器。 我在.container類中使用了一個元素：

.container {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

另外，您也可以絕對定位.footer元素並添加left: 0; right: 0; .footer left: 0; right: 0; 為了使其占據頁面的整個寬度：

這里的例子

.footer {
  position: absolute;
  left: 0;
  right: 0;
}

Answer 3

嘗試將CSS從您的身體移到一個包含的<div> ，並將所有內容放在其中，並使頁腳位於包含的<div> ，如果元素是唯一的，則使用id s not class

例如

HTML:
<body>
<div id="mainContent">
 <!-- Main site stuff here -->
</div>
<div id="footer">
 <!-- footer info here-->
</div>

CSS:
body{
 /*No CSS*/
}
#mainContent{
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

#footer {
  width: 100%;
  margin: 0;
}

使div占用頁面的整個寬度

問題描述

3 個解決方案

解決方案1
3 2015-01-31 18:41:45

解決方案2
2 2015-01-31 18:42:57

解決方案3
1 2015-01-31 18:48:39

使div占用頁面的整個寬度

問題描述

3 個解決方案

解決方案1 3 2015-01-31 18:41:45

解決方案2 2 2015-01-31 18:42:57

解決方案3 1 2015-01-31 18:48:39

解決方案1
3 2015-01-31 18:41:45

解決方案2
2 2015-01-31 18:42:57

解決方案3
1 2015-01-31 18:48:39