如何更正css中div的宽度

如何解决如何更正css中div的宽度

所以我目前正在用 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>

解决方法

有几种方法可以实现您的目标。下面我在您的页脚上设置了一个 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>

,

您可以使用 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 示例，请在下方留言询问。

,

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