CSS padding-bottom 似乎不起作用

Question

我需要在固定页脚和页面底部之间放置 space。我已经尝试为 #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

页脚底部为零并保持页脚在底部。当您再键入一个 div 时，您会看到 padding-bottom 正常工作。尝试 padding-bottom: 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 2

尝试 margin-bottom 而不是 padding-bottom

Answer 3

在此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 替换为 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 属性应该可以工作了。让我知道这有帮助:)

CSS padding-bottom 似乎不起作用

CSS padding-bottom does not seem to work

html

css

padding

footer