Html 将图元定位到高度的底部：100%div

我想在边栏div的底部钉一个按钮，它的高度为100%，因为它应该填满整个页面的左侧

我试着这样做：

。侧栏{
身高：100%；
位置：相对位置；
背景色：#中交；
}
.btn{
位置：绝对位置；
底部：0px；
顶部：自动；
}

按钮

问题在于您的容器没有任何实际高度。您还需要在html和body标记上定义高度，以便在其中使用百分比高度

html，
身体{
身高：100%；
保证金：0；
}
.侧边栏{
身高：100%；
位置：相对位置；
背景色：#中交；
}
.btn{
位置：绝对位置；
底部：0px；
顶部：自动；
}

按钮

要解决此问题，请将

html

和

body

的高度设置为100%，如下所示。现在他们没有一个定义的高度设置（所以他们是0px高），所以你的按钮技术上已经在底部了

现场示例：

html，正文{
身高：100%；
}
.侧边栏{
身高：100%；
位置：相对位置；
背景色：#中交；
}
.btn{
位置：绝对位置；
底部：0；
}

按钮

我认为您的评论是正确的，因为它确实是问题的解决方案。然而，我已经实现了这个解决方案。问题是，我使用的引导导航栏将整个页面向下“推”了51px，因此将“底部：0”按钮推到了视图之外。使用“底部：51px”解决了这个问题。