Html CSS填充底部似乎不起作用

我需要在固定页脚和页面底部之间留出空间。我尝试过为

#主要内容设置填充，但不起作用。这里有我没看到的问题吗


CSS

#main-content {
    position: relative;
    width: 100%;
    padding-left:20px; 
    padding-right:20px;
    height: 300px; 

    box-sizing:border-box;
    padding-top: 50px; 
    padding-bottom: 200px;    
}

footer {
    background-color: #00496b;
    width: 100%;
    bottom: 0;
    position: fixed;
}

而不是得到期望的结果，主要内容消失在页脚后面。我希望
#主要内容
再往上一点。希望我已经充分解释了这个问题。
页脚有底部零，并保持页脚到底部。当你们在中间再键入一个div时，你们会看到填充底部的操作正常。尝试填充底部：500px；并改为垫底：20px；你看到的变化是因为#主要内容非常高，300px。我键入border，现在您可以看到填充底部正常工作：

    <style>
#main-content {
    position: relative;
    width: 100%;
    padding-left:20px; 
    padding-right:20px;
    height: 100px; 

    box-sizing:border-box;
    padding-top: 50px; 
    padding-bottom: 200px; 
    border: 1px solid blue;   


}
footer {
            background-color: #00496b;
            width: 100%;
            bottom: 0;
            position: fixed;
        }
</style>
<div id="main-content">
lkdjad d,a dma dm dmad mad ad,ma dma dma dmad a 
</div>
<div>
midle midle
</div>
<footer>
footer footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footerfooter footer footer
</footer>


#主要内容{
位置：相对位置；
宽度：100%；
左侧填充：20px；
右边填充：20px；
高度：100px；
框大小：边框框；
填充顶部：50px；
垫底：200px；
边框：1px纯蓝色；
}
页脚{
背景色：#00496b；
宽度：100%；
底部：0；
位置：固定；
}
lkdjad d，一个dma-dm-dmad-mad-ad，ma-dma-dmad-a
中脉
页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚
在这个CSS代码中尝试
边距底部
而不是
填充底部
：

#main-content {
    position: relative;
    width: 100%;
    padding-left:20px; 
    padding-right:20px;
    height: 300px;
    box-sizing:border-box;
    padding-top: 50px; 
    padding-bottom: 200px;    
}

您为#主要内容设置了固定高度，因此填充底部无效。移除
高度：300px属性或仅将300px替换为auto

CSS代码应该如下所示：

#main-content {
    position: relative;
    width: 100%;
    padding-left:20px; 
    padding-right:20px;
    height: auto;  //height is set to auto
    box-sizing:border-box;
    padding-top: 50px; 
    padding-bottom: 200px;    
}

现在，padding bottom属性应该可以工作了。让我知道这很有帮助：）
给我发送url？网站还没有上线。。。我是否正确地假设代码看起来没问题。只需给出问题的图片。显然，我已经尝试改变填充底部：200px；许多不同的价值观。（没有区别）尝试设置边距而不是填充请包含HTML代码，这样我们可以更好地调试它。感谢您的帮助-但结果仍然相同。正如我前面所说的，我在paddingbottom中放置的值并没有什么区别：我键入border，现在你们可以看到paddingbottom正常工作。复制我的代码并更改填充底部的值，您会看到一切都正常。就是这样。。五星。。。非常感谢。很高兴我能帮忙：）