css - 具有位置属性的宽度固定容器中的 100% 元素？

Question

My issue on JSBin

---

我有一个带有文本的 div 容器。

<div id="container">
      Some text with normal content flow...
      <div id="wholescreen">Some 100% text</div>
      Some text again, without #wholescreen above the content.
      #wholescreen must respect the content flow.
 </div>

CSS

#container {
   width: 200px; 
   margin: auto;
}

在里面，我想要一个 100% 的元素。

#wholescreen {
   position: absolute;
   left: 0;
   width: 100%
}

这行得通。 但它在文本之上。所以，我尝试了position: relative:

#wholescreen {
   position: relative;
   left: 0;
   width: 100%
}

现在还没有超过元素，但也不是100%。

我做什么？我想要 this result .

Answer 1

如果#wholescreen 有一个固定的高度，直接在它后面的元素中添加一个margin-top:

#wholescreen + * {
  margin-top: /* value */;
}

这不会影响其他元素。就像我说的，只有 #wholescreen 之后的元素。

» Example on JSBin

---

如果您可以更改 HTML...

你为什么不试试这个？

<div class="container">Lorem ipsum dolor sit amet.</div>
<div id="wholescreen">100%</div>
<div class="container">Consectetur adipisicing elit.</div>

区别在于一个元素不会是另一个元素的子元素。 :P

» Example on JSBin