Question

我想在其内容后面持续拉伸background-color包装器。问题是，当内容溢出其包装器时，背景包装器不会对此进行调整。

<div style="background-color: black;min-height: 10px;">
  <div style="width: 100px;">
    <div style="background-color: red;min-height: 5px;min-width: 10000px;" />
  </div>
</div>

您可以看到黑色背景仅覆盖了视口宽度，而不是所使用的页面宽度。有没有一种方法可以“修复”此行为？我已经尝试过使用display: inline-block;，但事实上，这在语义上是错误的，并不能解决我的问题。我也已经尝试过使用display: table，但是由于中间层的宽度固定，它也不起作用。

请注意，内部包装器被隔离在其自己的文件中，并且外部包装器不可能覆盖内部包装器的每个子代孩子的display。

我使用width=device-width,initial-scale=1.0,maximum-scale=1.0作为视口元内容。

Answer 1

只需使用1个CSS属性即可解决该问题，并将其在每种浏览器中都可以使用：

display:table

您可以申请任意n个父母。

<div style="background-color: black;min-height: 10px;display:table">
  <div style="width: 100px;display:table">
    <div style="background-color: red;min-height: 5px;min-width: 10000px;" />
  </div>
</div>

将包装纸拉伸到其内容的整个宽度

1 个答案: