滾動div中的絕對底部位置？

我要對準我的按鈕在容器的底部，所以我使用：

.buttons{ 
    position: absolute; 
    bottom: 0; 
}

這是罰款時，沒有太多的內容（在小提琴粉紅色的div），但當有很多內容（小提琴中的橙色div）時，容器會滾動並且按鈕不在容器的底部。

我該如何使它在容器底部沒有大量內容時位於滾動底部（內容下方），當有很多內容時內容。

來源

2015-05-19 panthro

不是位置絕對將它們設置爲'位置：相對;' –

@ LuisP.A。謝謝，但沒有回答問題。 – panthro

@Vitorinofernandes謝謝，但這不回答問題 - 在橙色框中的按鈕應該低於內容 - 在滾動的底部。 – panthro

您必須添加height:100%爲HTML和身體，然後min-height:100%要將容器像這樣（我加了幾行，以使它看起來更好）：

body, html {height:100%; margin:0;} 

* {box-sizing: border-box;} 
.container{ 
    min-height: 100%; 
    position: relative; 
    padding-bottom:30px; 
} 
p {margin:0;} 

.buttons{ 
    position: absolute; 
    bottom:0; 
} 

.pink{ 
    background: pink; 
} 

.tomato{ 
    background: tomato; 
}

在這裏，你有FIDDLE

（添加更多的內容，以檢查出來）

編輯（高度固定） 相同的概念只是加入另一容器使用min-height

NEW FIDDLE

來源

2015-05-19 15:13:24

嗯......我想到了一個全高的容器。如果你需要倍數，可能無效。讓我知道，我可能會想另一種方式。 –

謝謝，但我需要容器的高度爲200px。 – panthro

驚人的快速觸發滑稽downvotes。我編輯了我的答案以適應你的設定高度 –

我添加具有最小高度的容器.inner。如果內容很少，那麼.inner容器會將按鈕推到底部。如果內容更多，那麼。容器容器將隨之增長。

.inner { 
    min-height: 149px; 
}

另請注意，按鈕具有相對位置而不是絕對位置。當一個元素是絕對的時，它不會對頁面內容做出反應。

https://jsfiddle.net/76gbfrah/10/

來源

2015-05-19 15:23:10 Mortaza

滾動div中的絕對底部位置？

回答

相關問題