Question

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

Here是问题的解决方案。包装器的css代码如下：

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

Answer 1

你需要给你的包装类赋予高度：auto！important。所以下面将是包装类的样子..

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

如果可能的话，尝试将页脚放在包装器外面。这实际上对我有用。

这是更新的小提琴。

<强> Updated 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>

现在包装器高出142px，因此重叠的页脚将覆盖#push而不是实际内容。

Answer 3

尝试使用这些样式更改

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

具有弹性布局的网站内容包装器

3 个答案:

DEMO