Question

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

@media (max-width: 480px) { // the breakpoint that the problem is ocurring
   .card.bg-white.mx-auto {
      width: 100% !important; // it should work instead of 30rem
   }
}

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

Answer 1

您需要删除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>

Answer 2

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

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

在此处详细了解。 https://cssreset.com/what-is-a-css-reset/

Answer 3

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

@Echo Off
Set "dir=F:\Sales\User 1\_QUOTES"
PushD "%dir%" 2>NUL||Exit /B
For %%A In (SO Customer JOB)Do Set "%%A="
ClS
Echo Enter the SO number, Customer and Job name when asked.
Echo(
Set /P "SO #: "
Set /P "Customer=Customer Name: "
Set /P "JOB=Job Name: "
Rem Note: You should perform some input verification here.

Set "final=%SO%_%Customer%_%JOB%"
Echo(%final%
Set "dst=%final%/1 - Estimating Original Quote Material"
For %%A In (
    "%dst%\Downloads"
    "%dst%\Plans"
    "%dst%\Quotes"
    "%dst%\Cut Sheets"
    "%dst%\Vendors"
    "%final%\2 - Signed Quote - Contract\Non-Current Purchase Orders"
    "%final%\3 - Special Purchase Trading Goods"
    "%final%\4 - Engineering\2 - Submittals"
    "%final%\4 - Engineering\3 - Approvals"
    "%final%\4 - Engineering\4 - Drawings in Progress\Released Production Drawings"
    "%final%\5 - Final Production Drawings"
    "%final%\6 - Q.C. Document"
    "%final%\7 - Project Management _ Schedule"   
) Do MD "%%A" 2>NUL
If Not Exist "%dst%\_takeoff.xlsx" If Exist "_takeoff.xlsx" Copy "_takeoff.xlsx" "%dst%"
Pause

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

Answer 4

首先，我建议在类中使用新标签c = 3 1 2 4 1 3 2而不是<header>, <main>& <footer>。

第二个问题是身体具有初始裕度，因此请尝试：

div

之后，由于边框的缘故，您仍将拥有一个滚动条。

因此，您有两种选择：

设置body{ margin:0; }而不是border-top和left。
为所有元素赋予样式* {box-sizing：border-box;}，这意味着元素的总宽度和高度包括填充和边框。

Answer 5

您也应该添加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 个答案: