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。之前和之后使用非固定高度工作。问题是，DIV .after是不可见的，因为它在div .maxwidth之下，当我制作DIV。之前更高（例如放入更多文本），它再次位于div .maxwidth之下。

感谢您的帮助。

Answer 1

将.maxwidth设置为top: 0; right: 0; bottom: 0; left: 0;会使其全屏显示

JSFIDDLE

Answer 2

最后，我用这种方式解决了这个问题：

<style>
   .parent {width:980px; margin:0 auto;}
   .maxwidth {position: absolute; left: 0; right:0; width:100%; height:60px;}
   .before {height: auto;}
   .after {height:auto; margin-top:60px;}
</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>

它是好的还是存在某些问题的空间？

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

2 个答案: