如何在 CSS 中忽略父级的宽度限制

Question

我的代码示例：

检查此链接 https://jsfiddle.net/b5woxesg/

解释：

我网站的内容是这样放置的，以使其位于页面的中央。使用 width: 以 % 和 max-width: 以 px 为单位不拉伸。此内容是从 Markdown 文件中调用的，因为我使用的是 jekyll。

我想做的是：每当我在 MD 文件中调用 {% highlight %} 时，生成的代码块应该是 width: 100% 但忽略父级的宽度限制。我的意思是整个页面的 100%。此外，里面的文字应该与页面内容保持一致。像这样的东西：

但是突出显示的 div 在带有蓝色边框的内容中。

我相信如果不改变当前结构就无法做到这一点，我对此没有问题，但由于我使用的是 MD 文件，因此可以限制某些更改。

@编辑：解决方案：

谢谢大家的帮助。

我使用了 @MD Ashik 提示并使用保存 .highlight 的简单 jQuery 代码对其进行了改进 height （因为我使用的是 height: auto 任何高度 - 任何高度).然后我在 .highlight 旁边创建了一个 div class="space" ，它仅用于填充内容中的空间。所以我将 .space div 设置为 .highlight 的 height

检查一下： https ://jsfiddle.net/b5woxesg/7/

原文由 MWsan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

实时链接

是的，只能通过 CSS 进行更改。通过少量更改：

1. 只需在课堂上制作 position: absolute; 到 relative .page 。

2. 并在 .highlight 类中添加 CSS

    position: absolute;
   left: 0;

如果您需要更多，请解决它，只需发表评论即可。

原文由 MD Ashik 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你不想使用定位来实现这一点，你可以这样做：

HTML:

 <div class="container-with-fixed-width">
    <div class="fluid"></div>
</div>

CSS：

 .fluid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

原文由 Shota 发布，翻译遵循 CC BY-SA 4.0 许可协议