css - HTML/CSS 使 div 贴紧到窗口底部

Question

我有这个 div：

<style>
#asd{
    height:auto;
width:1024px;
margin-left:auto;
margin-right:auto;
background-color:#093;
}

</style>

我希望这个 div 的底部总是向下到达窗口的底部，无论窗口的当前大小是什么。

到目前为止，我尝试添加到#asd 的 css 中，但没有得到预期的结果：margin-bottom:0px; 或高度：100%；或底部：0px；

有什么建议吗？

Answer 1

添加

position:absolute;
bottom:0;

到你的课...

#asd{
  height:auto;
  width:1024px;
  margin-left:auto;
  margin-right:auto;
  background-color:#093;
  position:absolute;
  bottom:0;
}

Answer 2

你会想要position: fixed如果你使用fixed，那么你需要告诉它在哪里修复：

#asd{
    height:auto;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    background-color:#093;
    position: fixed;
    bottom: 0;
}    

所以告诉它在你使用的页面的底部bottom: 0px

Answer 3

尝试设置min-height为 100%：

<style>
#asd{
    min-height:100%;
    width:1024px;
    margin-left:auto;
    margin-right:auto;
    background-color:#093;
}

</style>

Answer 4

确保在 body 上设置 100% 的高度和宽度，html 元素如下所示：

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

然后在 ASD 元素上使用 min 和 max-height：

#asd{
    height:100%;
    min-height: 100%:
    max-height: 100%;
    width:1024px;
    margin-left:auto;
    margin-right:auto;
    background-color:#093;
}