时间戳

首页 > 解决方案 > 如何使用“位置：绝对”修复 div 底部的页脚？

html - 如何使用“位置：绝对”修复 div 底部的页脚？

问题描述

如何在“内部”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 的位置设置为absolute. 我没有找到任何解决方案..甚至没有引导程序。

标签： htmlcss

解决方案

让我们添加到您的页脚元素position: absolute;中bottom: 0;，这将解决它。子absolute元素将具有相对于其父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>

推荐阅读