Hi this is my first time using semantic-ui framework & I have some problem with footer. I want to make footer to always stick in the bottom of page (not fixed).
this is the simple html of mine
I was trying use this css:
body {
position: relative;
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
but it doesn't work, it just work when the height of page is less than 100% of the monitor height, when it's height have more than 100% of monitor height the footer will float like this:
I also already change the css body with this:
body {
position: relative;
min-height: 100%;
}
but still doesn't work, anyone can help?
This is the full code, I made a long list table so you would know when you click the filter it will push the table down and the footer will mess.
body {
height: 100%;
color: #696F84;
position: relative;
}
.menu {
border-radius: 0 !important;
}
.item {
color: #696F84 !important;
}
.logo {
margin-right: 7px !important;
}
.company {
font-family: 'Righteous', cursive;
font-weight: normal;
font-size: 27px;
color: #515151;
padding-bottom: 2px;
}
.desc {
position: relative;
background-color: #EEEEEE;
margin-top: -1rem;
padding: 30px 0;
font-family: Raleway;
font-size: 24px;
color: #757575;
}
#filter {
width: 100%;
margin: 20px 0;
}
.footer {
background-color: #212121;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 15px 0;
}
"Description here | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
Filter
Small
Medium
Large
X-Large
Red
Orange
Green
Blue
Name
NoFoodCodeCaloriesProteinAction
1ApplesAp2000g2OrangeOr3100g3MangoMg3600g4GrapeGr2100g4GrapeGr2100g4GrapeGr2100g4GrapeGr2100g4GrapeGr2100g4GrapeGr2100g4GrapeGr2100g4GrapeGr2100g4GrapeGr2100g4GrapeGr2100gMicro Tech 2015. All Rights Reserved
$(document).ready(function() {
$('.ui.accordion').accordion();
})