html - 让div占据页面的整个宽度

我正在开发一个小网站。为了更容易阅读，我将网站的所有内容都推到了中心。

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

问题在于 div 遵循此规则并且仅位于正中心。

enter image description here

在页脚类中，我尝试通过将边距和宽度设置回 100% 来重置它们，但这不起作用。

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

最佳答案

不要将整个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>

关于html - 让div占据页面的整个宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28255130/