Question

我的代码示例：

点击此链接https://jsfiddle.net/b5woxesg/

解释

我的网站内容是这样放置的，以保持自己在页面的中心。 {1}在{％}和width:在px中不会拉伸。这个内容是从Markdown文件中调用的，因为我使用的是jekyll。

我想要做的是：每当我在MD文件中调用max-width:时，生成的代码块应该是{% highlight %}但忽略父代的宽度限制。我的意思是整页的100％。此外，内部文本应与页面内容保持一致。这样的事情：

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

我相信在没有改变当前结构的情况下没有办法做到这一点，我没有问题，但由于我使用的是MD文件，因此可以限制一些更改。

@EDIT：解决方案：

谢谢大家的帮助。

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

的div class="space"

检查出来：https://jsfiddle.net/b5woxesg/7/

Answer 1

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

是的，它只能通过CSS进行更改。几乎没有变化：

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

如果你需要更多的东西，只需发表评论即可解决。

Answer 2

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

你不能把位置绝对，因为元素会溢出。我生命中的热闹建议。 Mūṛhauttara。我是编程新手，这也可以解答你的问题。了解有关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 3

如果您不想使用定位来实现此目标，则可以执行以下操作：

HTML：

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

CSS：

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

Answer 4

你走了：

.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%;
}

How to generate a random BigInteger value in Java?

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以获得更多信息。

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

5 个答案: