页脚与页眉和菜单栏不对齐答案

【问题标题】：Footer doesn't align with header and menubar页脚与页眉和菜单栏不对齐
【发布时间】：2016-02-12 05:43:58
【问题描述】：

我在页脚对齐方面遇到了一些问题。左侧一切正常，但右侧不行。页脚没有像页眉或菜单栏那样的小间隙。

index.html:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="design.css" type="text/css" rel="stylesheet">
    <meta charset="utf-8"/>
    <title>Hello World</title>
</head>
<body>
<header id="header">
    <a href="#">
        <center>
            <p>LOGO HERE...</p>
        </center>
    </a>
</header>
<nav>
    <ul id="menu">
        <li>
            <a href="#">MENU-Item#1</a>
        </li>
        <li>
            <a href="#">MENU-Item#1</a>
        </li>
        <li>
            <a href="#">MENU-Item#1</a>
        </li>
        <li>
            <a href="#">MENU-Item#1</a>
        </li>
    </ul>
</nav>
<footer id="footer">
    <p>Copyright (c) 2016 - All rights reserved</p>
    LOREM IPSUM
</footer>
</body>
</html>

我的 CSS：

#footer {
    background-color: darkblue;
    bottom: 1px;
    color: white;
    height: 8vh;
    position: absolute;
    text-align: center;
    width: 100%;
}

我已经用 Firefox、Edge 和 Internet Explorer 测试了这段代码——总是相同的“问题”。但我不知道为什么...

【问题讨论】：

标签： html css

【解决方案1】：

试试这个删除 width: 100% 并添加 left: 0 和 right: 0 代替

【讨论】：

【解决方案2】：

这是因为预定义的填充/边距。请添加此 CSS 规则：

*{
  padding: 0;
  margin: 0;
}

这是一个简单的重置。我推荐你read this about css resets

在 sn-p 中检查它：

*{
  padding: 0;
  margin: 0;
}
#header{
  background-color: darkblue;
}
#footer {
    background-color: darkblue;
    bottom: 1px;
    color: white;
    height: 8vh;
    position: absolute;
    text-align: center;
    width: 100%;
}

<header id="header">
    <a href="#">
        <center>
            <p>LOGO HERE...</p>
        </center>
    </a>
</header>
<nav>
    <ul id="menu">
        <li>
            <a href="#">MENU-Item#1</a>
        </li>
        <li>
            <a href="#">MENU-Item#1</a>
        </li>
        <li>
            <a href="#">MENU-Item#1</a>
        </li>
        <li>
            <a href="#">MENU-Item#1</a>
        </li>
    </ul>
</nav>
<footer id="footer">
    <p>Copyright (c) 2016 - All rights reserved</p>
    LOREM IPSUM
</footer>

【讨论】：

嘿，克里斯，我想你误会了：我想要左右间隙。所以我需要一个解决页脚右侧间隙的方法。