CSS - div 100％宽度的页面不是父级 - div之后

我想请求帮助完成此任务：我需要强制div具有100％宽度的页面，而不是父级。这是可能的方式是这样的：CSS - div 100％宽度的页面不是父级 - div之后

<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之下。

谢谢你的帮助。

来源

2014-10-12 Pavel Straka

left：0，top：0，right：0;底部：0，你将不需要宽度：100％，高度：100％ – 2014-10-12 14:00:37

请注意，div的父母不能有'position：relative'或'absolute' – 2014-10-12 14:06:50

你可以修改HTML并创建两个父项前后的div;在父包装外部留下最大宽度？ [就像这个例子]（http://jsbin.com/pujego/1/edit）？或者你不能改变HTML？ – misterManSam 2014-10-12 15:23:59

设置.maxwidth到top: 0; right: 0; bottom: 0; left: 0;将使其全屏

JSFIDDLE

来源

2014-10-12 15:08:49 jmore009

最后，我以这种方式解决了这个：

<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>

难道还好吧，还是有空间的一些问题？

来源

2014-10-12 16:22:10

CSS - div 100％宽度的页面不是父级 - div之后

回答

相关问题