Menu
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
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav class="ui borderless menu">
</nav>
<div class="desc">
</div>
<div class="ui container">
</div>
<div class="ui container">
</div>
<footer class="footer">
</footer>
</body>
</html>
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;
}<link href="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.js"></script>
<nav class="ui borderless menu">
<div class="header item">
<img class="logo" src="./img/logo.jpg" alt="logo">
<div class="company">Company Name</div>
</div>
<!-- end left menu -->
</nav>
<!-- end navbar -->
<div>
<div class="ui container">
<p>"Description here | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."</p>
</div>
</div>
<!-- end description -->
<div class="ui container">
<div class="ui styled accordion" id="filter">
<div class="title">
<i class="dropdown icon"></i>
Filter
</div>
<div class="content">
<div class="ui grid">
<div class="four wide column" id="radio">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="small">
<label>Small</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="medium">
<label>Medium</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="large">
<label>Large</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="x-large">
<label>X-Large</label>
</div>
</div>
</div>
<!-- end grouped fields -->
</div>
<!-- end form -->
</div>
<!-- end radio -->
<div class="four wide column" id="checkbox">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="small">
<label>Red</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="medium">
<label>Orange</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="large">
<label>Green</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="x-large">
<label>Blue</label>
</div>
</div>
</div>
<!-- end grouped fields -->
</div>
<!-- end form -->
</div>
<!-- end checkbox -->
<div class="eight wide column" id="input">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui labeled input">
<div class="ui label">
Name
</div>
<input type="text" placeholder="your name">
</div>
</div>
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<!-- end grouped fields -->
</div>
<!-- end form -->
</div>
<!-- end input -->
</div>
<!-- end grid -->
</div>
<!-- end content -->
</div>
<!-- end accordion -->
<table class="ui blue celled striped compact table">
<thead>
<tr>
<th class="collapsing">No</th>
<th>Food</th>
<th>Code</th>
<th>Calories</th>
<th>Protein</th>
<th class="center aligned collapsing">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsing">1</td>
<td>Apples</td>
<td>Ap</td>
<td>200</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">2</td>
<td>Orange</td>
<td>Or</td>
<td>310</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">3</td>
<td>Mango</td>
<td>Mg</td>
<td>360</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
</tbody>
</table>
<!-- end table -->
</div>
<!-- end container -->
<footer class="footer">
Micro Tech 2015. All Rights Reserved
</footer>
<script type="text/javascript">
$(document).ready(function() {
$('.ui.accordion').accordion();
})
</script>
977
add a warp div like below
<div class="main">
.......
</div>
<div class="footer">
......
</div>
and set css
.main{min-height:100%;
padding-bottom:60px;
box-sizing:border-box;}
.footer {
background-color: #212121;
position: absolute;
/* bottom: 0; remove this */
margin-top: -50px; /* add this */
left: 0;
width: 100%;
padding: 15px 0;
}
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;
}
.main{min-height:100%; padding-bottom:60px; box-sizing:border-box;}
.footer {
background-color: #212121;
position: absolute;
/* bottom: 0; remove this */
margin-top: -50px; /* add this */
left: 0;
width: 100%;
padding: 15px 0;
}<link href="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//oss.maxcdn.com/semantic-ui/2.1.6/semantic.min.js"></script>
<div class="main">
<nav class="ui borderless menu">
<div class="header item">
<img class="logo" src="./img/logo.jpg" alt="logo">
<div class="company">Company Name</div>
</div>
<!-- end left menu -->
</nav>
<!-- end navbar -->
<div>
<div class="ui container">
<p>"Description here | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."</p>
</div>
</div>
<!-- end description -->
<div class="ui container">
<div class="ui styled accordion" id="filter">
<div class="title">
<i class="dropdown icon"></i>
Filter
</div>
<div class="content">
<div class="ui grid">
<div class="four wide column" id="radio">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="small">
<label>Small</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="medium">
<label>Medium</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="large">
<label>Large</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="size" value="x-large">
<label>X-Large</label>
</div>
</div>
</div>
<!-- end grouped fields -->
</div>
<!-- end form -->
</div>
<!-- end radio -->
<div class="four wide column" id="checkbox">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="small">
<label>Red</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="medium">
<label>Orange</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="large">
<label>Green</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="x-large">
<label>Blue</label>
</div>
</div>
</div>
<!-- end grouped fields -->
</div>
<!-- end form -->
</div>
<!-- end checkbox -->
<div class="eight wide column" id="input">
<div class="ui form">
<div class="grouped fields">
<div class="field">
<div class="ui labeled input">
<div class="ui label">
Name
</div>
<input type="text" placeholder="your name">
</div>
</div>
<div class="field">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
<!-- end grouped fields -->
</div>
<!-- end form -->
</div>
<!-- end input -->
</div>
<!-- end grid -->
</div>
<!-- end content -->
</div>
<!-- end accordion -->
<table class="ui blue celled striped compact table">
<thead>
<tr>
<th class="collapsing">No</th>
<th>Food</th>
<th>Code</th>
<th>Calories</th>
<th>Protein</th>
<th class="center aligned collapsing">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsing">1</td>
<td>Apples</td>
<td>Ap</td>
<td>200</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">2</td>
<td>Orange</td>
<td>Or</td>
<td>310</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">3</td>
<td>Mango</td>
<td>Mg</td>
<td>360</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
<tr>
<td class="collapsing">4</td>
<td>Grape</td>
<td>Gr</td>
<td>210</td>
<td>0g</td>
</tr>
</tbody>
</table>
<!-- end table -->
</div>
<!-- end container -->
</div>
<footer class="footer">
Micro Tech 2015. All Rights Reserved
</footer>
<script type="text/javascript">
$(document).ready(function() {
$('.ui.accordion').accordion();
})
</script>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
