时间戳

首页 > 解决方案 > 填充 100% 的视口，忽略父级的侧边距但尊重垂直滚动条

html - 填充 100% 的视口，忽略父级的侧边距但尊重垂直滚动条

问题描述

要求

  1. .Child尽管.Parent有侧边距，但必须填充 100% 的视口。
  2. .Parent的侧面填充事先是未知的.Child（假设.Child是一个可重用的组件，它不知道它使用的环境）
  3. 滚动条的宽度是依赖于浏览器的，因此它的宽度事先是未知的，并且不能被硬编码。
  4. .Child长度必须完全可见。

解决方案尝试

.Parent {
  background: #BBDEFB;
  padding: 0 20px;
}

.Child {
  width: 100vw;
  margin-left: calc(-0.5*(100vw - 100%));
  /* Child does not know that `Parent's` paddings are 20px */
  height: 40px;
  background: #FF8F00;
  border: 5px solid #283593;
}

.Dummy {
  height: 1000px;
  background: #E1BEE7;
}
<div class="Parent">
  <div class="Child"></div>
  <div class="Dummy"></div>
</div>

的Child左右边框不可见。我想原因是滚动条。

我们可以尊重滚动条吗？

标签： htmlcssscrollbar

解决方案

这可能无法满足父级具有侧面“填充”的要求。我在这个答案中松散地解释了这一点。

如果您不需要使用“vw”单位，则无需担心滚动条的宽度。就个人而言，我认为“100vw”和“100vh”现在是代码异味，因为滚动条和移动浏览器 chrome 存在所有潜在问题。

* {
  box-sizing: border-box;
}

.Parent {
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  background: lightblue;
}

.Child {
  grid-column: 1/-1;
  height: 40px;
  background: orange;
  border: 5px solid #283593;
}

.Dummy {
  grid-column: 2/3;
  height: 200px;
  background: pink;
}
<div class="Parent">
  <div class="Child"></div>
  <div class="Dummy"></div>
</div>

推荐阅读