弹性布局的网站内容包装

Question

当我显示内容时，我的网站出现了问题，有时它与页脚重叠，包装器不会根据内容大小更改大小，因为我已经将其设置为绝对值。因此，我应该寻找一个“弹性”选项来解决这个问题，我一直在网上搜索，找到任何东西，所以我有点迷茫。如何设置包装器的高度，使文本被完整地包含，并且页面足够长来包含它，而无需使用绝对值而使其与页脚重叠？

这里是这个问题的推动者。包装器的css代码如下：

.wrapper {
    height: 500px;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}

Answer 1

你需要给高度:自动！重要的包装类。下面将是什么样的包装类。

.wrapper {
    height: auto !important;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
    overflow:auto;
}

如果可能的话，试着把页脚放在包装的外面。这对我来说很管用。

这是最新的小提琴。

更新Fiddle

Answer 2

如果我正确地理解了您的意思，您需要将div放在.wrapper的末尾，让我们称之为#push

<style type="text/css">
.wrapper { margin: 0 auto -142px; }
#push { height: 142px; }
</style>
<div class="wrapper">
<!-- some content here -->
    <div id="push"> </div>
</div>




and now wrapper is higher by 142px, so overlapping footer will cover #push instead of actual content.

Answer 3

尝试使用这些样式更改

.wrapper {
    height: 500px; // remove this
    margin: 0 auto; 
    overflow:hidden;
}

演示