I have a a page as following that works fine in big screens but in small screens the mainsection overlap the footer. How can I have the footer always at the bottom of the page. Also in small screens the location of the footer should be based on content of the page. In other words, if content is lengthy it should push footer to the bottom of the page. None of them should overlap the other.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
<style>
footer {
bottom: 0;
height: 60px;
position: absolute;
width: 100%;
}
body {
margin-bottom: 60px;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0;
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mainsection{
width: 100%;
margin: 0 0 1em 0;
box-shadow: 0px 0px 1px 1px black;
background: white;
display: flex;
}
.innersection {
list-style: none;
display: flex;
flex-wrap: wrap;
max-width: 1900px;
width: 100%;
margin: 0 auto;
padding: 1em;
}
.mainsection>img {
height: 74px;
width: 120px;
margin: 0 5px 0 0;
}
.mainsection>span {
width: calc(100% - 55px);
margin-left: 2%;
}
@media ( min-width :599px) {
.mainsection{
width: 49%;
margin: 0 2% 1em 0;
}
}
@media ( min-width :599px) and (max-width:1024px) {
.mainsection:nth-child(2n + 2) {
margin: 0 0 1em 0;
}
}
@media ( min-width :1024px) {
.mainsection{
width: 24%;
margin: 0 1.3333333333% 1em 0;
}
.mainsection:nth-child(4n + 4) {
margin: 0 0 1em 0;
}
}
<!--
/
mainsectionisements
-->
</style>
</head>
<body>
<div class="container">
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
</div>
<ul class="innersection">
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
</ul>
<footer>
<p>This is the footer.This is the footer.This is the footer.This is the footer.This is the footer.</p>
</footer>
</body>
</html>
position: absolute for footerwrapper for page content to push down footerhtml,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
footer {
bottom: 0;
height: 60px;
width: 100%;
background: #ccc;
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mainsection{
width: 100%;
margin: 0 0 1em 0;
box-shadow: 0px 0px 1px 1px black;
background: white;
display: flex;
}
.innersection {
list-style: none;
display: flex;
flex-wrap: wrap;
max-width: 1900px;
width: 100%;
margin: 0 auto;
padding: 1em;
}
.mainsection>img {
height: 74px;
width: 120px;
margin: 0 5px 0 0;
}
.mainsection>span {
width: calc(100% - 55px);
margin-left: 2%;
}
@media ( min-width :599px) {
.mainsection{
width: 49%;
margin: 0 2% 1em 0;
}
}
@media ( min-width :599px) and (max-width:1024px) {
.mainsection:nth-child(2n + 2) {
margin: 0 0 1em 0;
}
}
@media ( min-width :1024px) {
.mainsection{
width: 24%;
margin: 0 1.3333333333% 1em 0;
}
.mainsection:nth-child(4n + 4) {
margin: 0 0 1em 0;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container">
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
<p>This is the container body</p>
</div>
<ul class="innersection">
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
<li class="mainsection"><span class="content"> <strong>This is Title</strong> <br /> <a href="tel:111111">111 111 111</a>
<p>This is line 3</p>
<p>This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.This is line 4.</p>
</span></li>
</ul>
</div>
<footer>
<p>This is the footer.This is the footer.This is the footer.This is the footer.This is the footer.</p>
</footer>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments