滚动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中的绝对底部位置？

回答

相关问题