如果網頁上沒有內容而不是單個標題，如何將文本保持在頁腳附近

Question

我試圖讓我的 h1 保持在頁腳附近而不在頁眉上使用 margin-bottom 以便我的文本將保持在頁腳附近我想要這樣的東西在此處輸入圖片描述

我嘗試過的解決方案是給頁眉提供 margin-bottom:515px 以便它保持在底部，但如果我知道任何更好的方法來實現這件事，我將不勝感激

Answer 1

由於重疊問題，無法推薦絕對位置。 Flex 會變魔術。

 body, html { margin: 0; } .header { align-items: flex-end; background-color: red; display: flex; height: calc(100vh - 100px); } h1 { margin: 0 0 50px; } .footer { align-items: center; background-color: blue; color: white; display: flex; height: 100px; width: 100% } p { margin: 0; }

 <div class="header"> <h1>H1 goes here</h1> </div> <div class="footer"> <p>footer goes here</p> </div>

Answer 2

您可以對 h1 使用絕對定位：

position: absolute;
left: 0px; 
bottom: 0px;

或者制作一些 div 來保存頁面的結構：

//css
#header {
     height: 'headerHeight'px;
}
#content {
     height: Calc(100% - 'headerHeight'px - 'footerHeight'px);
}
#footer {
     height: 'footerHeight'px;
}
//html
<body>
    <div id="header"></div>
    <div id="content"></div>
    <div id "footer">your H1</div>
</body>

如果網頁上沒有內容而不是單個標題，如何將文本保持在頁腳附近

問題描述

2 個解決方案

解決方案1
2 已采納 2020-01-23 08:50:02

解決方案2
0 2020-01-23 08:46:59

如果網頁上沒有內容而不是單個標題，如何將文本保持在頁腳附近

問題描述

2 個解決方案

解決方案1 2 已采納 2020-01-23 08:50:02

解決方案2 0 2020-01-23 08:46:59

解決方案1
2 已采納 2020-01-23 08:50:02

解決方案2
0 2020-01-23 08:46:59