html - 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 替换为 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 属性应该起作用了。让我知道这有帮助:)