html - Content section overlap footer -
i have a page following works fine in big screens in small screens mainsection overlap footer. how can have footer @ bottom of page. in small screens location of footer should based on content of page. in other words, if content lengthy should push footer bottom of page. none of them should overlap 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) , (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 container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> </div> <ul class="innersection"> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> </ul> <footer> <p>this footer.this footer.this footer.this footer.this footer.</p> </footer> </body> </html>
- remove -
position: absolutefooter - create
wrapperpage content push downfooter
html, body { height: 100%; } body { margin: 0; padding: 0; } .wrapper { min-height: 100%; height: auto; /* negative indent footer height */ margin: 0 auto -60px; /* pad bottom 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) , (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 container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> <p>this container body</p> </div> <ul class="innersection"> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> <li class="mainsection"><span class="content"> <strong>this title</strong> <br /> <a href="tel:111111">111 111 111</a> <p>this line 3</p> <p>this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.this line 4.</p> </span></li> </ul> </div> <footer> <p>this footer.this footer.this footer.this footer.this footer.</p> </footer>
Comments
Post a Comment