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

回答

相關問題