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

Question

我的代码示例：

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

说明：

我的网站内容是这样放置的，以使其保持在页面的中心。 width: in % 和 max-width: in px 不拉伸。 这个内容是从 Markdown 文件中调用的，因为我使用的是 jekyll。

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

但高亮 div 位于带有蓝色边框的内容内。

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

@EDIT：解决方案：

感谢大家的帮助。

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

查看：https://jsfiddle.net/b5woxesg/7/

Answer 1

给你：

.highlight {
  background-color: yellow;
  height: 50px;
  padding-top: 25px;
  color: black;
  width: 100%;
  position: relative;
  z-index: 1
}

.highlight:before,
.highlight:after {
  background: yellow;
  height: 50px;
  padding-top: 25px;
  width: 40px;
  display: block;
  position: absolute;
  z-index: -1;
  content: '';
  top: 0;
}
.highlight:before {
  left: -12.5%;
}

.highlight:after {
  right: -12.6%;
}

https://jsfiddle.net/b5woxesg/3/

Answer 2

Live Link

是的，只能通过 CSS 进行更改。 通过一些改变：

1. 只需将position: absolute; 转为relative 上课.page。

2. 并在 .highlight 类中添加 CSS

   position: absolute;
   left: 0;
   

如果您需要更多解决方案，请发表评论。

Answer 3

https://jsfiddle.net/b5woxesg/6/

你不能放置绝对位置，因为元素会溢出。我生命中曾经有过有趣的建议。 Mūṛha uttara。我是编程新手，这也可以回答您的问题。了解有关 JavaScript 的更多信息。两天前我刚开始学习javascript。所以，它可能并不完美。

let page = document.getElementById('page'),
	content = document.getElementById('content'),
	highlight = document.getElementById('highlight'),
  pageStyle = window.getComputedStyle(page, null);
  
highlight.style.width = pageStyle.getPropertyValue('width');
highlight.style.marginLeft = `-${content.offsetLeft + 1}px`

window.onresize = () => {
	highlight.style.width = pageStyle.getPropertyValue('width');
	highlight.style.marginLeft = `-${content.offsetLeft + 1}px`
}

body {
  background-color: #ccc;
}
.page {
  position: relative;
  width: 50%;
  height: auto;
  left: 10px;
  top: 10px;
  background-color: #000;
  padding: 10px 0 10px;
}
.content {
  width: 80%;
  max-width 200px;
  height: auto;
  border: 1px solid blue;
  color: #fff;
  margin: 0 auto;
}
.highlight {
  background-color: yellow;
  width: 100%;
  height: 50px;
  padding-top: 25px;
  color: black;
  left:0;
}

<div class="page" id="page">
  <div class="content" id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec mattis est. Donec eget hendrerit lacus. Ut aliquet hendrerit lacinia. Mauris auctor rhoncus turpis ac tempus.
    <div class="highlight" id="highlight">
      <b>highlight</b>
    </div>
    Donec non imperdiet urna, nec cursus magna. Suspendisse ligula erat, consequat quis est ac, sollicitudin placerat diam.
  </div>
</div>

oson savol tentak。

Answer 4

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

HTML：

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

CSS：

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

Answer 5

即使这已经解决了，为了将来参考，这里有一个不使用任何 Javascript 的小提琴解决方案。

考虑到它在一个宽度为 80% 的 div 内，用于计算正确的宽度（宽度 + 填充），并且它的祖父（这甚至是一个技术术语吗？:)）是一个宽度为 50% 的 div用于计算负边距。应该很容易适应其他情况。

只需添加到.highlight:

width: 101.1%;
padding-left: 12%;
padding-right: 12%;
position: relative;
left: 50%;
right: 50%;
margin-left: -25vw;
margin-right: -25vw;

小提琴：https://jsfiddle.net/dzrne1uo/1/

您可能想查看this article 了解更多信息。