Question

由于某种原因，我的页眉和页脚没有正确居中，它们似乎只有几个像素。此外，当我向下滚动页面（而不是粘在顶部/底部）时，页脚因某种原因移动。

我已经足够了，因为代码从我的研究中看起来是正确的，但它只是不起作用。所以，如果有人知道最新情况，那就很感激了。

body {
  background-color: #323232;
  font-family: Lato;
  padding: 0;
  margin: 0;
}
.nav {
  font-weight: normal;
  list-style: none;
  text-align: center;
  width: 100%;
  top: 0;
  padding: 20px 0 20px 0;
  background-color: #4F4F4F;
}

.nav li {
  display: inline-block;
  padding: 0 25px 0 25px;
}

.nav li a {
  text-decoration: none;
  color: #ffffff;
}

.nav li a:hover {
  color: #c1c1c1;
}

.footer {
  list-style: none;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 20px 0 20px 0;
}

.footer li {
  display: inline-block;
  padding: 0 25px 0 25px;
  font-weight: lighter;
}

.footer li a {
  text-decoration: none;
  color: #ffffff;
}

<header>
  <ul class="nav">
    <li><a href="index.html">HOME</a></li>
    <li><a href="projects.html">PROJECTS</a></li>
    <li><a href="about.html">ABOUT</a></li>
  </ul>
</header>

<footer>
  <ul class="footer">
    <li><a href="https://steamcommunity.com/id/wow">Made by Lumo © 2017</a>
    </li>
  </ul>
</footer>

Answer 1

我不确定我是否帮你...

您的页脚没有显示，因为您在白色背景上使用白色字体（如果没有设置背景颜色，则页脚是透明的）
如果要修改视口底部（position: fixed;）的位置，请将页脚设置为position: absolute;而不是bottom: 0;。
只要您未在身上设置任何margin，浏览器就会根据user-agent-stylesheet选择默认值，在大多数情况下，8px将为position。只要您的页脚absolute设置为fixed或width，您在margin中定义的百分比就会指向视口宽度，但不会考虑到身体的填充和边缘。因此，您的页脚比标题更宽。要解决此问题，您可以将正文0设置为body { margin: 0; padding: 0; } #placeholder { min-height: 500px; width: 100%; } .nav { font-weight: normal; list-style: none; text-align: center; width: 100%; top: 0; padding: 20px 0 20px 0; background-color: #4F4F4F; } .nav li { display: inline-block; padding: 0 25px 0 25px; } .nav li a { text-decoration: none; color: #ffffff; } .nav li a:hover { color: #c1c1c1; } .footer { background-color: #444; list-style: none; text-align: center; position: fixed; width: 100%; bottom: 0; padding: 20px 0 20px 0; } .footer li { display: inline-block; padding: 0 25px 0 25px; font-weight: lighter; } .footer li a { text-decoration: none; color: #ffffff; }。

＆＃13;

<header><ul class="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">PROJECTS</a></li>
    <li><a href="#">ABOUT</a></li>
  </ul>
</header>

<div id="placeholder"></div>

<footer>
  <ul class="footer">
    <li><a href="https://steamcommunity.com/id/wow">Made by Lumo © 2017</a>
    </li>
  </ul>
</footer>

＆＃13;

multithreading

＆＃13;

页眉/页脚未在中心对齐/保持静止

1 个答案: