html - 如何使横幅在加载时始终出现在屏幕底部？

Question

对于我的个人网站，我试图在加载时在屏幕底部显示一个带有我名字的横幅，无论其大小如何。

不过我不希望横幅跟随屏幕。

这是我正在使用的横幅 CSS/HTML:

.header-card {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    margin: auto;
    background: rgba(0, 0, 0, 0.5);
    color: white;
}

<div class="header-card">
        <h1>My Name</h1>
</div>

Answer 1

在浏览器窗口的底部:

.header-card {
    position: fixed; //fixed is absolute to a browser
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
}

<div class="header-card">
    <h1>My Name</h1>
</div>

在页面底部(或父级“相对”元素):

.header-card {
    position: absolute; // absolute is absolute to a relative element
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
}

<div class="header-card">
    <h1>My Name</h1>
</div>