Question

我有一个带有一些div的页面。我的页面非常动态，我根据用户输入显示和隐藏div。

我希望页脚始终显示在底部，并让其上方的其他div显示在滚动中。由于我的数据是异步填充的，我的视图加载但是一旦内容被注入页面，我的页脚似乎移动

以下是我尝试做的一个简单示例：

<div class="parent">
    <div class="dynamic-div1">async div1</div>
    <div class="dynamic-div2">async div2</div>
    <div class="footer">Always appear at bottom</div>
</div>

Answer 1

尝试添加页脚位置

<div class="parent">
    <div class="dynamic-div1">async div1</div>
    <div class="dynamic-div2">async div2</div>
    <div class="footer">Always appear at bottom</div>
</div>

CSS中的

.footer
{
  position:absolute;
  bottom:0px;
}

Answer 2

HTML中的

<div class="parent">
   <div class="dynamic-div1">async div1</div>
   <div class="dynamic-div2">async div2</div>
   <div class="footer">Always appear at bottom</div>
</div>

CSS中的

div.parent{
position:relative;
}
div.footer
{
position:absolute;
bottom:0px;
}

Answer 3

看起来你正在寻找底部的固定页脚。您可以使用position:fixed并应用以下位置。

＆＃13;

.footer {
  position:fixed;
  height:20px;
  background:#ccc;
  bottom:0;
  left:0;
  right:0;
  text-align:center;
}

＆＃13;

<div class="parent">
    <div class="dynamic-div1">async div1</div>
    <div class="dynamic-div2">async div2</div>
    <div class="footer">Always appear at bottom</div>
</div>

＆＃13;

动态插入数据时如何在页面底部强制div

3 个答案: