Html 如何使用CSS将div元素浮动到屏幕底部？

我正在制作一个包含不同部分的网站，一个在屏幕底部。我首先尝试将div元素放在footer元素中。这不管用。该div仍在屏幕顶部。我没有主意了，所以我在谷歌上搜索解决方案。我试过的都没用。我怎样才能做到这一点呢？

如果您希望它始终位于屏幕底部（即：触摸显示器底部），您可以使用

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

只需确保它不在使用

位置：relative声明的任何内容中，否则它将卡在该元素的底部

如果希望它位于包装器元素的底部，请使用

.myWrapperClass{
    position: absolute;
}

然后将
.myElementClass
元素放在
.myWrapperClass
元素中，如果您需要页脚始终显示在屏幕上或页面末尾，请看下面的答案。这个解释和我的一样


.main{
位置：相对位置；
高度：700px；
宽度：100%；
背景：蓝色；
}
.盒子{
位置：绝对位置；
底部：0px；
宽度：100%；
}
.box1{
宽度：100px；
高度：100px；
背景：红色；
浮动：对；
}

浮动属性
在本例中，图像将在文本中向右浮动

您可以使用，下面的解决方案可能很有用

您可以使用class
main content
将页面的主要内容放在div中，使用下面的Flexbox设置，页脚将始终被推到底部

HTML:

但是，上面的代码不会更改flexbox容器的高度。因此，您可能需要添加如下内容：

.flexbox-container {
  ...
  height: 100vh;
}

一个很好的页面可以解释所使用的Flexbox。
您能否尝试创建一个显示您的问题的页面？这可能只是您已有的代码片段。在没有看到你想要达到的目标的情况下，很难建议你应该做什么。这是否回答了你的问题@劳伦斯·维特：这是“堆栈溢出”（而不是“堆栈溢出”）。参见例如“*”（最后一节-向下滚动）。
.flexbox-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flexbox-container {
  ...
  height: 100vh;
}