CSS padding-bottom doesn't seem to work
I need to place a space between the fixed footer and the bottom of the page. I tried installing the add-on for #main-content
, but it doesn't work. Are there problems here that I haven't seen?
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;
}
Instead of getting the desired result, the main content disappears behind the footer. I want to #main-content
go a little further. I hope I have explained the problem in sufficient detail.
source to share
In this CSS code:
#main-content {
position: relative;
width: 100%;
padding-left:20px;
padding-right:20px;
height: 300px;
box-sizing:border-box;
padding-top: 50px;
padding-bottom: 200px;
}
you set a fixed height # for the main content , which is causing the bottom to not work. Remove the property height: 300px;
or just replace 300px with automatic .
The CSS code should look like this:
#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;
}
The padding-bottom property should now work. Let me know it helps :)
source to share
The footer has a footer and a footer at the bottom. When you enter another div you can see the bottom of the bottom is working correctly. Try the addition: 500px; and change to padding-bottom: 20px; what you see is the change because # main-content is very high, 300px. I type in the frame and you can now see that the normal fill-bottom works fine:
<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>
source to share