时间戳

首页 > 解决方案 > 将包装器拉伸到其内容的全宽

html - 将包装器拉伸到其内容的全宽

问题描述

我想始终如一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用作我的视口元内容。

标签： htmlcss

解决方案

它可以只使用 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>

推荐阅读