如何使用 CSS 在叠加层中获得 100% 的宽度

Question

我正在创建叠加层，但右侧的宽度不对。我哪里出错了？最后，我想要一些占屏幕 100% 宽度的按钮，减去一些边距。

body
{
   width: 100%;
   margin: 0px;
}

.a1 
{
  background-color: rgba(0, 0, 0, 0.7); 
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.a2 {
  width: 100%;
  border: 5px solid blue;
   }

  <div class="a1">
    <div class="a2">The width is going to far on the right</div>
  </div>

Answer 1

您不需要在 child div a2 上指定 width: 100%。作为块元素，它会自动填充parent元素的可用宽度，设置在100%.

您的 a2 CSS 变为：

.a2 {
  border: 5px solid blue;
}

通过这种方式，您的边距将得到尊重并按预期工作：

* {
  box-sizing: border-box;
}

body
{
   width: 100%;
   margin: 0px;
}

.a1 
{
  background-color: rgba(0, 0, 0, 0.7); 
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.a2 {
  border: 5px solid blue;
}

<div class="a1">
  <div class="a2">The width is going to far on the right</div>
</div>

以下关于元素大小的 OP 评论

我注意到您没有特别提到您使用 border-box 作为 box-sizing 方法。我现在已将其添加到代码段中。

使用 border-box 意味着当您指定框的大小时，您将包括该大小内的边框。

例如，如果宽度设置为 100%，则宽度为 100%包括元素上的任何边框。默认情况下，大多数规范化样式表将 box-sizing 设置为 border-box。

如何使用 CSS 在叠加层中获得 100% 的宽度

How to get width 100% right in overlay with CSS

css

overlay

margin

width