html - CSS - div 100% 页面宽度不是父级 - div 之后和之前

Question

我想请求帮助完成这项任务: 我需要强制 div 具有 100% 的页面宽度，而不是父级。 这可以通过这样的方式实现:

<style>
   .parent {width:980px; margin:0 auto;}
   .maxwidth {position: absolute; left: 0; right:0; width:100%; height: auto;}
</style>

<div class="parent">
   <div class="before">
      height is not fixed
   </div>

   <div class="maxwidth">
      100% width of page
   </div>

    <div class="after">
       height is not fixed
    </div>
</div>

但我现在不知道如何使 DIV .before 和 .after 具有不固定的高度。 问题是，DIV .after 不可见，因为它位于 div .maxwidth 下，当我将 DIV .before 设置得更高时(例如，将更多文本放入其中)，它再次位于 div .maxwidth 下。

谢谢你的帮助。

Answer 1

设置.maxwidth为top: 0;右:0；底部:0； left: 0; 将全屏显示

JSFIDDLE