Html 当内容为100%时，页脚与内容重叠

我想要的是，我的.content\u pro始终位于页脚顶部，即屏幕的分辨率。但当我说高度：100%时，它就在我的脚下。我。挣扎了几个小时，但它不会工作。这是我的HTML和CSS：

HTML:

---

谢谢

如果我正确理解了你的问题，那么我想这样的方法会管用的。只是增加了填充物

这里是小提琴

---

这就是您想要的？？？

首先，您希望从css中删除此步骤

* {
    width:100%;
    margin:0 auto;
    padding: 0;
    font-family:arial;
    overflow-x: hidden;
    position: relative;
}

你可以只留下这些，但有时它有额外的规则，不需要使用它

* {
    margin:0;
    padding:0;
}

您需要在body标记中使用的字体系列-如下所示

body {
    font: Arial, Helvetica, sans-serif;
}

至于你的问题。下面是一个如何将页脚粘到底的示例（因为我正确理解了您试图实现的目标）

HTML

<div id="wrapper">
    <div class="w1">sdfsdfsd</div>
</div>
<footer id="footer">ssdfsdfs</footer>

---

不完全是。。如果你不明白我的意思，我很抱歉，我不擅长这样问。但我想要的是，内容的底部总是粘在页脚的顶部。因此，如果您使浏览器窗口变大或变小，页脚allready始终位于底部，但我希望内容随它移动。我发现我的html和css有点被我尝试过的东西毁了。

* {
    margin:0;
    padding:0;
}

body {
    font: Arial, Helvetica, sans-serif;
}

<div id="wrapper">
    <div class="w1">sdfsdfsd</div>
</div>
<footer id="footer">ssdfsdfs</footer>

html, body {
    height: 100%;
    margin: 0;
}
#wrapper {
    min-height: 100%;
    width: 100%;
}
.w1 {padding-bottom:50px /*footer height*/;}
#footer {
    height: 50px;
    margin-top: -50px; /*equal to footer height */
    position: relative;
    width: 100%;
}