Hi, this is my first time using the semantics-ui framework, and I have some problems with the footer. I want the footer to always be at the bottom of the page (not fixed).
this is my simple html
<!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 tried to use this css:
body {
position: relative;
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
but it doesn’t work, it just works, when the page height is less than 100% of the monitor height, when the height exceeds 100% of the monitor height, the footer will float as follows:
I also change the css body as follows: body {position: relative; min-height: 100%; }
but still not working, can anyone help?
This is the complete code, I made a long table of lists so that you know when you click on the filter, it will push the table down and the footer will be messy.
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>
</nav>
<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 standard."</p>
</div>
</div>
<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>
</div>
</div>
<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>
</div>
</div>
<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>
</div>
</div>
</div>
</div>
</div>
<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>
</div>
<footer class="footer">
Micro Tech 2015. All Rights Reserved
</footer>
<script type="text/javascript">
$(document).ready(function() {
$('.ui.accordion').accordion();
})
</script>