Question

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

我不希望横幅跟随屏幕。

以下是我正在使用的横幅CSS / HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

位于页面底部（或父级＆＃34;亲属＆＃34;元素）：

.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>

Answer 2

听起来你正在寻找position:fixed，这将导致你的元素'＃34;坚持＆＃34;到页面底部：

.header-card {
   position: fixed;
   /* other styles omitted for brevity */
}

如果您只希望广告在初始页面加载时出现并在用户开始滚动时消失，您可以使用onscroll事件使用一小段Javascript来完成此操作：

<!-- This will hide your ad when any scrolling occurs -->
<body onscroll="ad.style.display = 'none';">
<div id='ad' class="header-card">
   <h1>My Name</h1>
</div>

Answer 3

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

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

在加载时，如何制作横幅广告始终显示在屏幕底部？

3 个答案: