頁腳不會向下移動

當我的應用程序容器div展開時，它會溢出我的頁腳。我的頁腳應該遠離應用程序容器（或分別包裝整個包裝），但它不會，我也無法找到問題所在。頁腳不會向下移動

HTML代碼：

<div class="wrapper"> 
<div class="wrapperbackground"> 
    <div class="app-container"> 
    </div> 
</div> 
</div> 

<footer> 
<div class="footerwrapper"> 
</div> 
</footer>

CSS代碼：

.wrapper { text-align:center; min-height: 900px; } 

.wrapperbackground { background-color: #C63D0F; height:375px; padding: 25px 0px; } 

.app-container { 
    border: 1px dotted; 
    padding: 30px; 
    margin: 0 auto; 
    min-height:300px; 
    width:775px; 
    background-color:#FDF3E7; 
    overflow:hidden; 
} 

footer { 
    height:100%; 
    border-top: 1px dashed #FDF3E7; 
    background-color:#250800; 
    text-align:left; 
} 

.footerwrapper { border-bottom: 1px dotted #3B3738;padding:50px;min-height:200px; background-color:#220a03; margin: 0 auto; }

將是很好，如果有人可以幫助我。我同意CSS代碼有點混亂，這也許是問題所在。

來源

2014-01-08 maikovich

似乎工作http://jsfiddle.net/Rs5q8/ – raam86

的問題是在這裏：http://jsfiddle.net/Rs5q8/1/ – maikovich

您需要將.wrapperbackground移至.app-container之前，以便它不再包裝它。然後在 '.wrapperbackground' 適用於：

position: absolute; top: 0; right: 0; left: 0; height: 200px;

然後在.wrapper申請position: relative;良好的措施和更便攜。

看到這個更新的小提琴 - http://jsfiddle.net/p57rK/1/

來源

2014-01-08 23:28:07 nickspiel

好了，謝謝你。但是有沒有辦法避免從.wrapperbackground移除高度？我想讓背景可見。 – maikovich

當然，你可以重新添加它，這仍然可以工作。我只是認爲這是無意的。我已經相應地更新了我的答案。 – nickspiel

是的，但並不是指應用程序容器中的高度，而是指wrapperbackground中的高度。 :-) – maikovich

頁腳不會向下移動

回答

相關問題