如何使用“位置：絕對”修復 div 底部的頁腳？

Question

如何在“內部”div 的底部修復這個“彈出頁腳”？

 .inner { position: absolute; }

 <div className="inner"> <div className="popup-header"> UPDATE </div> <div className="popup-body"> </div> <div className="popup-footer"> </div> </div>

PS：我想提一下，“內部” div 將 position 設置為absolute 。 我沒有找到任何解決方案..甚至沒有引導程序。

Answer 1

讓我們添加到您的頁腳元素position: absolute; 和bottom: 0; ，這將解決它。 子absolute元素將具有 position，相對於它的父absolute元素，而不是視口。

 html { height: 100%; padding: 0; margin: 0; } body { min-height: 100%; padding: 0; margin: 0; position: relative; }.inner { width: 100%; height: 100%; position: absolute; }.popup-footer { position: absolute; bottom: 0; /* this will fix it */ left: 0; /* and fixing to a left side */ /* just to see it */ background: #aaa; height: 20px; width: 100%; }

 <div class="inner"> <div class="popup-header"> UPDATE </div> <div class="popup-body"> </div> <div class="popup-footer"> </div> </div>

Answer 2

首先，當你定義你的類名時，確保你使用class=而不是className=

嘗試這個：

<div class="inner">
        <div class="popup-header">
             HEADER
        </div>
        <div class="popup-body">
             BODY
        </div>
        <div class="popup-footer">
             FOOTER
        </div>
</div>

在您的 CSS 中：

.inner {
 position: absolute;
 height:100%;
}
.popup-footer{
 position:absolute;
 display:block;
 bottom:0;
}