如何在css中更正div的宽度答案

【问题标题】：How to correct the width of a div in css如何在css中更正div的宽度
【发布时间】：2021-03-30 15:58:46
【问题描述】：

因此，我目前正忙于使用 HTML 和 CSS 进行网站设计，并且遇到了一个奇怪的问题。我有一个要放在屏幕底部的页脚，但是当我这样做时，它的宽度比我想要的要小，这就是窗口的宽度。如果我将宽度设置为 100%，它会使宽度比屏幕宽，并在屏幕底部给我那个小滚动条。我有一个主要的包装器，里面有我的页脚。这是 CSS：

.main-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}

.footer {
  background-color: #e1e1e1;
  padding: 20px;
  bottom: 0;
  position: absolute;
}

此代码当前将页脚粘贴到屏幕底部，但使其太小。我不知道如何解决这个问题，如果有办法知道会很高兴。

<div class="main-wrapper">
    
    <!-- other stuff here -->

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

【问题讨论】：

需要查看完整的 HTML 结构，而不仅仅是 CSS。我也想知道你为什么不使用display: sticky 或display: fixed。
哦，好的。我不使用这样的东西的原因是因为我不知道它存在所以嗯我试试看
尝试宽度：100vw
你对盒子尺寸有什么了解吗？ developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
您的正文或 HTML 元素中可能有边距或内边距。使用html, body 选择器并将边距和填充设置为0px。

标签： html css footer

【解决方案1】：

有几种方法可以实现您正在尝试的目标。下面我在您的页脚上设置了一个fixed 位置，并将主包装器和页脚设置为100vw。

.main-wrapper {
  height: 100%;
  width: 100vw;
  position: relative;
}

.footer {
  background-color: #e1e1e1;
  padding: 20px;
  bottom: 0;
  position: fixed;
  width: 100vw;
}

<div class="main-wrapper">

  <!-- other stuff here -->

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

此外，这里还有一个使用flexbox 的选项。

在下面的示例中，body 容器设置为窗口的高度，main-wrapper div 被告知根据需要展开。

这是一个更好的选择，因为它会自动响应移动设备，并且不会在页脚高度发生变化时中断。

注意：我已在此示例中调整了您的 HTML，并将页脚 div 移到了 main-wrapper 之外。

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main-wrapper {
  flex: 1;
}

.footer {
  background-color: #e1e1e1;
  padding: 20px;
}

<div class="main-wrapper">

  <!-- other stuff here -->

</div>

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

【讨论】：

由于某种原因，我尝试了两种方法仍然不起作用

【解决方案2】：

您可以使用 flex 或 grid 将所有元素保留在流中，然后在屏幕上或页脚之前设置滚动条：

网格示例：

页脚在底部，但可以向下推

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}

main {
  background: hotpink;
}

footer {
  background: gray;
  padding: 1em;
  text-align: center;
}

<main>
  All of my stuff here
</main>
<footer>My bottom footer</footer>

主滚动网格

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}

main {
  background: hotpink;
  overflow: auto;
}

footer {
  background: gray;
  padding: 1em;
  text-align: center;
}

<main>
  All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br>  All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br>  All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br> All of my stuff here<br>
</main>
<footer>My bottom footer</footer>

如果您需要 flex 示例，请在下方发表评论。

【讨论】：

【解决方案3】：

我修好了。原来使用 position: fixed 或 position: sticky 会修复它

【讨论】：