我要对准我的按钮在容器的底部,所以我使用:
.buttons{
position: absolute;
bottom: 0;
}
这是罚款时,没有太多的内容(在小提琴粉红色的div),但当有很多内容(小提琴中的橙色div)时,容器会滚动并且按钮不在容器的底部。
我该如何使它在容器底部没有大量内容时位于滚动底部(内容下方),当有很多内容时内容。
我要对准我的按钮在容器的底部,所以我使用:
.buttons{
position: absolute;
bottom: 0;
}
这是罚款时,没有太多的内容(在小提琴粉红色的div),但当有很多内容(小提琴中的橙色div)时,容器会滚动并且按钮不在容器的底部。
我该如何使它在容器底部没有大量内容时位于滚动底部(内容下方),当有很多内容时内容。
您必须添加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
嗯......我想到了一个全高的容器。如果你需要倍数,可能无效。让我知道,我可能会想另一种方式。 –
谢谢,但我需要容器的高度为200px。 – panthro
惊人的快速触发滑稽downvotes。我编辑了我的答案以适应你的设定高度 –
我添加具有最小高度的容器.inner。如果内容很少,那么.inner容器会将按钮推到底部。如果内容更多,那么。容器容器将随之增长。
.inner {
min-height: 149px;
}
另请注意,按钮具有相对位置而不是绝对位置。当一个元素是绝对的时,它不会对页面内容做出反应。
不是位置绝对将它们设置为'位置:相对;' –
@ LuisP.A。谢谢,但没有回答问题。 – panthro
@Vitorinofernandes谢谢,但这不回答问题 - 在橙色框中的按钮应该低于内容 - 在滚动的底部。 – panthro