如何讓div粘貼到父div的底部？

任何人都可以請我幫我製作div#bottom堅持到父div的底部，所以當我點擊裏面的按鈕，它將允許我顯示div#list以上的元素本身？如何讓div粘貼到父div的底部？

優選我希望避免JS，jQuery的等，或至少在佈局：

<div class="wrapper"> 
    <div id="top"> 
    <ul> 
     ... 
     ... 
    </ul> 
    </div> 
    <div class="bottom"> 
     <div id="button"> 
     <div id="list"> 
      <ul> 
       <li>elem 1</li> 
       <li>elem 2</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
</div>

來源

2011-02-24 m1k3y3

我回答了一個類似的問題，並給出了這個例子：www.jsfiddle.net/Kyle_Sevenoaks/5fryQ/11 – Kyle

你的div'.bottom'缺少'class'屬性，以防萬一你回來說它不是工作:) – Val

感謝編輯:-) – m1k3y3

.wrapper{position:relative;} 
.bottom{position:absolute; bottom:0;}

編輯

由於@ centr0和@TJ克勞德的這裏要理解的關鍵是.wrapper中的position:relative將「包含」具有position:absolute的任何元素。這就像宣佈.bottom的邊界一樣。沒有position:relative在.wrapper,.bottom會突破div

來源

2011-02-24 14:50:02 Val

+1，但你可能想*解釋*爲什麼它的作品，可能引用一兩個參考？提及的含義（例如，其他元素將重疊，如果他們得到的那麼遠），等等，等等。 –

我不這樣做的生活大聲笑:)我只是嘗試n回報的東西，所以當我需要幫助，我不覺得內疚:)但我確定'css位置相對'谷歌可以解釋它好得多:) http://www.w3schools.com/css/css_positioning.asp或此頁 – Val

我跑到類似的問題。 Val的解決方案很好，但有一個問題 - 內部股利將堅守底部，但由於它的「位置：絕對的」，它不會影響parrent股的高度。（它不在頁面佈局流程中）。

因此，這裏是我的人有類似的問題擴展的解決方案：

.wrapper { 
    position: relative; 
    padding-bottom: 50px; 
} 

.wrapper .bottom { 
    position: absolute; 
    bottom: 0px; 
    height: 50px; 
}

正如你所看到的，我設置了包裝的.bottom ANG填充底的高度。缺點是，頁腳的高度在兩個地方。但我認爲這是一個很好的解決方案，例如產品列表，其中框的頁腳有固定的高度（如價格等）。請記住，每次設置「position：absolute;」時，該元素都將被絕對定位爲具有設置位置屬性的第一個父div。或者，最終，對頁面本身。

來源

2014-12-13 10:37:41

如何讓div粘貼到父div的底部？

回答

相關問題