html - 具有 flex 布局的网站内容包装器

Question

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

Here是问题的jsfiddle。包装器的 css 代码如下:

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

Answer 1

你需要给你的包装类 height:auto !important 。那么下面将是包装类的样子..

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

如果可能，请尝试将页脚放在 wrapper 之外。这实际上对我有用。

这是更新后的 fiddle 。

Updated Fiddle