Question

我一直在尝试在网页上确定以下问题的原因。

使用下面的代码，当任何浏览器调整大小并且页面可以水平滚动时，右侧会出现一个空白区域。

如何删除此空格？感谢您提供的所有帮助！

body {
  margin: 0;
  padding: 0;
}
.wrap {
  background-color: #2a2c67;
}
.main {
  height: 50px;
  text-align: center;
  width: 1300px;
  margin-right: auto;
  margin-left: auto;
  color: #fff;
}

<div class="wrap">
  <div class="main">Content Goes Here</div>
</div>

Answer 1

容器“wrap”没有设置宽度，因此作为块元素，它将占用ACTUAL窗口大小的100％。当你水平滚动因为孩子的固定宽度大于他的父亲和实际窗口时，你将滚动孩子，但是父母将保持它的atm窗口大小和滚出窗口。它不会动态地改变他当前的宽度（正如浏览器所理解的那样）来填充子宽度。

Imo你只需要改变孩子的背景颜色来修复它（而不是它被打破）。

编辑：或者正如其他人所说的那样......将宽度设置为换行而不是“主”

body { margin: 0; padding: 0; } .wrap { } .main { height: 50px; text-align: center; width: 1300px; margin-right: auto; margin-left: auto; color: #fff; background-color: #2a2c67; }

<div class="wrap"> <div class="main">Content Goes Here</div> </div>

网页右侧的空白问题

1 个答案: