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

Question

我的代码示例：

勾选这个linkhttps://jsfiddle.net/b5woxesg/

说明：

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

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

但是高亮div在蓝色边框的内容里面

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

@编辑：解决方案：

谢谢大家的帮助。

我使用了 @MD Ashik 技巧并使用简单的 jQuery 代码改进了它，该代码保存了 .highlight height（因为我使用的是 height: auto 高度可以是任何数字）。然后我在.highlight旁边创建了一个div class="space"，它只用于填充内容中的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。通过少量更改：

只需在 class .page 上 position: absolute; 到 relative。
并在.highlight中添加CSS class
```
position: absolute;
left: 0;
```

解决问题，如果您还需要什么，请发表评论。

Answer 3

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

不能放绝对位置，因为元素会溢出。我一生中的滑稽建议。 Mūṛha uttara。我是编程新手，这也可以回答您的问题。详细了解 javascript。我刚开始学习 javascript 2 天前。所以，它可能并不完美。

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.

的 fiddle 的解决方案

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

只需添加到.highlight:

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

Fiddle: https://jsfiddle.net/dzrne1uo/1/

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

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

How to ignore parent's width limit in CSS

html

css

markdown

jekyll