CSS填充底部似乎不工作

我需要在固定页脚和页面底部之间放置空格。我已经尝试设置填充#main-content，但它不起作用。这里有没有问题，我没有看到？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; 
}

不但得不到期望的结果，主要内容消失页脚的背后，来代替。我想#main-content进一步了。希望我已经解释了这个问题。

来源

2017-04-01 user7763438

给我的网址？ –

该网站还没有结束......我假设代码看起来没问题。 – user7763438

只是提出了问题的照片。显然，我试图改变填充底部：200px;到许多不同的价值。（没有区别） – user7763438

在这个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由于其中填充底部不起作用。删除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;  
}

现在，填充底部财产应工作。让我知道这有助于:)

来源

2017-04-01 10:12:33 Sudipto

就是这样.. 5颗星...非常感谢。 – user7763438

很高兴我能帮忙:) – Sudipto

页脚底部为零并保持页脚底部。当你输入一个div时，你会发现padding-bottom功能正常。试试padding-bottom：500px;并更改为padding-bottom：20px;你看到的变化，因为＃主要内容是非常高度，300px。 I型边框，现在你可以看到，填充底工作正常：

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

来源

2017-04-01 09:20:59 b2ok

感谢您的支持 - 但结果仍然相同。正如我前面所说，它几乎没有什么价值我放在填充底部： – user7763438

我键入边框，现在你可以看到填充底部工作正常。复制我的代码并更改padding-bottom的值，并且您看到一切正常。 – b2ok

尝试margin-bottom代替padding-bottom

来源

2017-04-01 09:35:30 Johannes

CSS填充底部似乎不工作

回答

相关问题