子div伸出或相對定位父div/footer問題

我遇到了問題與我的divs。我試圖做一個內容父潛水，這將擴大在帖子被放置在它（WordPress的主題）沒有從底部pertddeed子div。我發現這個關鍵是要讓父div完全絕對，但這給我帶來了另一個問題。事情是，我也想要一個相對定位的頁腳，隨着內容分區的延伸而移動。所以我想要的是怎樣才能同時擁有「有彈性」的內容div和相對定位的頁腳？這裏是我的CSS：子div伸出或相對定位父div/footer問題

body{height: 100%; 
margin: 0; 
padding: 0; 
} 
#wrapper{width: 100%; 
min-height: 100%; 
height: auto !important; 
height: 100%; 
} 
#content{height: 35em; 
width: 30em: 
position: absolute; 
padding: .62em; 
margin: 5em; 
} 
.post{width: 12em; 
height: 12em; 
margin: 1em; 
float: left; 
} 
#footer{position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
text-align: center; 
margin: 1em 0 0; 
}

就像我說的，我已經嘗試過的相對位置，但沒有工作，我的胃口。我還嘗試了「粘性頁腳」方法，該方法在大分辨率屏幕上工作正常，但在較小的屏幕上顯示在內容div的前面或後面（取決於z-index）。另外，如果它是可行的，我寧願不使用JS。任何幫助深表感謝！內容的內容輸入代碼在這裏

來源

2012-09-08 Alfonso Verdeja

設置溢流到汽車，
變化高度最小高度，
有包裹在幸福相對的div元素絕對。

下面是一個的jsfiddle顯示它：http://jsfiddle.net/mAhet/

HTML

<html> 
<body> 
    <div id="wrapper"> 
     <div id="content"> 
      <div style="position:relative; width:100%; height:100%;"> 
      <div class="post">lasa sf </div> 
      <div class="post"> asd asd as</div> 
      <div class="post"> asd a dsadda das</div> 
     </div> 
     </div> 
     <div id="footer"></div> 
    </div> 
</body> 
</html>

CSS

body{height: 100%; 
margin: 0; 
padding: 0; 
} 
#wrapper{width: 100%; 
min-height: 100%; 
height: auto !important; 
height: 100%; 
position:relative; 
} 
#content{ 

min-height: 35em; 
width: 30em: 
position: absolute; 
padding: .62em; 
margin: 5em; 
overflow:auto; 
} 
.post{width: 12em; 
height: 12em; 
margin: 1em; 
float: left; 
} 
#footer{position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
text-align: center; 
margin: 1em 0 0; 
}

下面是一個的jsfiddle顯示在用行動表明：http://jsfiddle.net/mAhet/

來源

2012-09-08 07:10:28 jett

子div伸出或相對定位父div/footer問題

回答

相關問題