Question

我有以下结构：

<div class="body">
    Some text
    <div style="display:none;">Very long text</div>
    <button type="button" onclick="copyBody(this);">More</button>
</div>

我的javascript：

function copyBody(elem){
    elem.parentElement.innerText = elem.parentElement.children[0].innerText;
}

当我点击按钮时，隐形文本被正确复制到正文div中，任何没有绝对定位的后续html内容都会被正确移动。

问题是我有一个粘性页脚，具有这种风格：

.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:40px;
}

底层属性的定义：

定义和用法

对于绝对定位的元素，底部   property将元素的下边缘设置为上/下的单位   其包含元素的下边缘。

问题是页脚完全保持在同一位置。如何让它重新计算包含元素的边缘？

这是适用于Chrome的jsfiddle

Answer 1

您的HTML看起来有点令人困惑，请尽量避免使用.body类。

.container {
  position: relative;
  padding-bottom: 40px; // footer height
}

在.container上将位置设置为relative。您的页脚位于绝对位置，因此需要一些相关元素。我也用你的页脚包装div删除了.container类。

<div class="footer"><div>Footer</div></div>

<强> DEMO

编辑：添加了padding-bottom，因此您的页脚不会重叠内容。

动态DOM操作后，bottom属性变得错误

1 个答案: