Html 粘性页脚（不固定）隐藏主要内容

也许我构建的东西是错误的（像往常一样），但问题是，一旦内容一直向下延伸，我就会在页脚后面获取主要内容。 虽然它做了我希望它做的事情，当内容开始填满时，向下推页脚…但它有一定数量的信息总是隐藏在页脚后面。是因为浮动/位置吗

您可以从此代码笔URL中看到：

页脚从红线处开始，您可以看到问题所在

一个要求：我希望页脚现在有同样的效果，保持固定，在主窗口没有/很少的内容，但一旦内容接近它，被按下，谢谢男孩n女孩

您可以添加：

#content {
  padding-bottom: 200px;
}

基本上抵消了页脚的高度

---

如下更新您的css

代替

位置：绝对位置制作<代码>位置：相对

#footer{
    /*background-image: url("../img/Me_footer.jpg");*/
    height: 200px;
    /*background-color: red;*/
    position:relative;
    width: 100%;
    border-top: 1px solid red;
}

我想你可以使用一些弹性盒的概念来实现你想要的。
首先，我强烈建议你看一看，然后你会很容易理解我用来解决你的问题

基本上，我所做的是告诉
主要内容
占据所需的空间，然后在结束后放置页脚。这样做有两个好处：

你不需要使用绝对/固定定位，如果你想让你的网站响应，什么会给你带来麻烦
不管主内容需要多少空间，页脚总是在它上面
在上面的例子中，我留下了所有的评论，只是为了让你了解我删除了什么和添加了什么


html，
身体{
身高：100%；
保证金：0；
填充：0；
边界：0；
背景图片：url（“../img/france.jpg”）；
/*来自www.pixabay.com的背景图像*/
/*“Pixabay上的所有图像和视频在Creative Commons CC0下免费发布。”*/
背景重复：无重复；
背景尺寸：封面；
/*宽度：100vw*/
}
身体{
背景色：#A9A9；
/*边缘底部：100px*/
}
#包装纸{
最小高度：100%；
保证金：0自动；
宽度：1000px；
位置：相对位置；
背景色：#fff；
/*左边框：5px实心#313131*/
/*右边框：5px实心#313131*/
}
#标题{
高度：200px；
背景图片：url（“../img/Me.jpg”）；
}
#页脚{
/*背景图片：url（“../img/Me_footer.jpg”）*/
显示：内联块；
高度：200px；
背景色：红色；
/*位置：绝对位置*/
宽度：100%；
/*底部：0*/
/*左：0*/
边框顶部：1px纯红；
}
#家，
#奥米格，
#histernet，
#整合网{
宽度：200px；
浮动：左；
边框顶部：1px实心#313131；
左边框：1px实心#313131；
右边框：1px实心#313131；
利润率：10px038.4px；
边框右上角半径：10px；
边框左上半径：10px；
文本对齐：居中；
填充：10px0；
}
跨度{
字体大小：20px；
字体大小：粗体；
}
#主要内容{
填充：20px；
背景颜色：绿色；
边框顶部：5px实心#313131；
显示器：flex；
弯曲方向：立柱；
/*高度：计算（100%-200px）*/
}
.主动{
背景颜色：黄色；
-webkit盒阴影：插入4px4px7px-2pxRGBA（0,0,0,0.75）；
-moz盒阴影：插入4px4px7px-2pxRGBA（0,0,0,0.75）；
盒影：插入4px4px7px-2pxRGBA（0,0,0,0.75）；
}
.不活跃{
背景颜色：浅灰色；
-webkit盒阴影：插入4px3px7px-2pxRGBA（0,0,0,0.75）；
-moz盒阴影：4px3px7px-2pxRGBA（0,0,0,0.75）；
盒影：4px3px7px-2pxRGBA（0,0,0,0.75）；
}
#清楚,，
#页脚{
明确：两者皆有；
/*底部：100px*/
}

主要内容
shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

shfkjshdf kjsdhf ksjdhf

页脚
你可以在主要内容中添加一个与页脚高度相同的
填充底部。这是你想要的吗？：塞巴斯蒂安、班扎伊和奥沃库罗，你们都是对的！我之前确实做过这个，但是因为我在我的背景“封面”上表现出了古怪的行为，我认为我错了…所以现在我需要看看如何处理背景图像，谢谢大家！有什么理由不使用
位置：static
来代替吗？读了这篇文章，你会得到清楚的解释，谢谢。在这种情况下，为什么要分配一个
位置
？为什么不删除它并将页脚保留为默认值---@moller-peter，我认为这是最优雅的解决方案。在一天结束时，页脚会被删除，这意味着页面的其余部分不知道如何为它留出空间。这只是确保了
#content
框架在其自身内容之后明确地留出足够的空间来满足页脚大小。我之前确实这样做了，但由于我在使用的背景图像上丢失了“封面”功能（图像滚动并在页脚区域留下空白），我认为我做错了。谢谢如果你否决了我，请告诉我原因。所以我可以
#footer{
    /*background-image: url("../img/Me_footer.jpg");*/
    height: 200px;
    /*background-color: red;*/
    position:relative;
    width: 100%;
    border-top: 1px solid red;
}