如何使橫幅總是出現在屏幕的底部，在負載上？

對於我的個人網站，我試圖讓我的名字出現在屏幕底部，而不管它的大小。如何使橫幅總是出現在屏幕的底部，在負載上？

我不想讓橫幅跟着屏幕。

這裏是我的工作的旗幟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>

來源

2016-04-11 ellenmight

這聽起來像你正在尋找position:fixed，這將導致你的元素，以「粘」您的頁面底部：

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

如果您只希望廣告出現在初始頁面加載和消失

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

來源

2016-04-11 19:59:07

我其實不希望它「粘」到頁面上。我只希望它在用戶加載頁面時顯示在屏幕的底部。 *問題是不同大小的屏幕 – ellenmight

所以你希望它出現在底部，並在用戶開始滾動時消失？ –

要在屏幕底部生成，然後在用戶開始滾動後保持該位置。那有意義嗎？我會嘗試與你顯示的JS合作 – ellenmight

在瀏覽器窗口的底部：

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

在你的頁面的底部R當用戶開始滾動，你可以使用Javascript的一個小片段使用onscroll事件做到這一點（或父「相對」元素）：

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

來源

2016-04-11 19:59:58 JaxCze

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

來源

2016-04-11 20:18:34 pradeep1991singh

如何使橫幅總是出現在屏幕的底部，在負載上？

回答

相關問題