CSS padding-bottom似乎不起作用

Question

我需要在固定页脚和页面底部之间放置空格。我已尝试为#main-content设置填充，但它无效。这里有没有问题我没看到？

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;
}

而不是获得所需的结果，主要内容消失在页脚后面。我希望#main-content更进一步。希望我已经解释了这个问题。

Answer 1

在这个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;    
}

您为 #main-content 设置了固定的高度，因为 padding-bottom 无效。删除height: 300px;媒体资源或仅使用自动替换 300px 。

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 属性应该可以使用。让我知道这有助于：）

Answer 2

页脚底部为零并将页脚保持在底部。当您在另一个之间键入一个div时，您会看到填充底部正常工作。尝试填充底部：500px;并改为padding-bottom：20px;你看到的变化是因为#main-content非常高，300px。我输入border，现在你可以看到padding-bottom工作正常：

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

Answer 3

尝试使用margin-bottom代替padding-bottom