Question

我正在一个小网站上工作。为了便于阅读，我将网站的所有内容推送到了中心。

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

问题是div遵循这个规则，并且只在正中心。

enter image description here

在页脚课程中，我尝试通过将边距和宽度设置为100％来重置边距和宽度，但这不起作用。

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

CodePen

Answer 1

不要将整个body设置为500px宽度，而是为主要内容创建div，然后将页脚放在下面。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将包装元素的.footer元素放在之外：

Example Here

在这种情况下，使用body以外的元素作为包装器/容器。我使用了类.container的元素：

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

作为替代方案，您还可以绝对定位.footer元素并添加left: 0; right: 0;，以便占据页面的整个宽度：

Example Here

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

Answer 3

尝试将css从您的身体移动到包含<div>并将所有内容放入其中，并将您的页脚置于包含<div>的下方，如果该元素是唯一的，请使用id s不是class

e.g。

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 个答案: