如何使页脚接触边缘？ [复制]答案

【问题标题】：how to make the footer touch the edges? [duplicate]如何使页脚接触边缘？ [复制]
【发布时间】：2019-07-20 06:11:54
【问题描述】：

请看下面的代码。页脚没有接触边缘。如果我将页脚宽度设置为 100% 或 100vw，我会在浏览器中看到一个水平滚动条。 99% 达不到要求。他们不是找到像 99.4% 之类的硬编码值，而是完美地接触边缘？

          .main .footer {
            border: 1px solid black;
            background-color: #d4d4d4;
            text-align: center;
            position: absolute;
            bottom: 0;
            height: 40px;
            width: 99%;
          }

        <div class="main">
          <div class="footer"></div>
        </div>

【问题讨论】：

您可以尝试将边框更改为边框顶部，然后设置 100% 宽度。
忠告：绝对不要使用width:100% 和绝对的固定元素，改用left:0;right:0

标签： html css

【解决方案1】：

每个浏览器都有自己的默认“用户代理”样式表，用于使无样式的网站看起来更清晰。例如，大多数浏览器默认将链接设为蓝色，将访问链接设为紫色，为表格提供一定数量的边框和填充，将可变字体大小应用于 H1、H2、H3 等，并为几乎所有内容应用一定数量的填充。

在您当前的示例中，默认正文将设置边距。要使文档的正文接触边缘，您需要为正文边距添加一个重置，margin: 0;

在此处阅读有关它的更多信息。 https://cssreset.com/what-is-a-css-reset/

【讨论】：

另外，在您的示例中，页脚的边框为 1px。如果不重置页脚的框大小，页脚将是 100% 宽 + 每边 1px。要轻松解决此问题，请将box-sizing: border-box; 添加到页脚。大多数重置都将包含一个通用的盒子大小重置。

【解决方案2】：

您需要删除 body 元素上的边距。然后由于您使用的是绝对定位，请删除宽度声明并使用左/右：

body {
  margin:0;
}

.main .footer {
  border: 1px solid black;
  background-color: #d4d4d4;
  text-align: center;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 40px;
}

body {
  margin: 0;
}

<div class="main">
  <div class="footer"></div>
</div>

【讨论】：

【解决方案3】：

应用 CSS 重置，默认情况下，它设置了填充和边距，这就是为什么它不适合边缘：

*{
 margin:0;
 padding:0;
}
.main {
 border: 1px solid black;
 background-color: #d4d4d4;
 height: 90vh;
}
.footer {
 border: 1px solid black;
 background-color: #d4d4d4;
 height: 10vh;
}

 <body>
    <div class="main"> 
     Your content
    </div>
    <div class="footer">
      Your Footer
    </div>
  </body>

【讨论】：

【解决方案4】：

你也应该添加 left 属性，然后放置一个边框，该边框占据一个空间，我使用 box-sizing:border-box;使用元素内部空间的选项。我为您附上了一些有用的链接： box-sizing, box-model

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .main .footer {
        border: 1px solid black;
        box-sizing:border-box;
        background-color: #d4d4d4;
        text-align: center;
        position: absolute;
        bottom: 0;
        left:0;
        height: 40px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="footer"></div>
    </div>
  </body>
</html>

【讨论】：

【解决方案5】：

首先我建议使用新标签<header>, <main>& <footer> 而不是div 与类。

第二个问题是body有一个初始边距所以试试：

body{ margin:0; }

之后你仍然会有一个滚动条，因为有边框。

所以你有两个选择：

设置border-top 而不是left 和right。
为所有元素指定样式 * {box-sizing: border-box;}，这意味着元素的总宽度和高度包括内边距和边框。

【讨论】：