Есть ли какая-нибудь возможность прикрепить футер к низу страницы, не изменяя разметку контейнера и мейна.
На данный момент пробовал все что умею и знаю:
- менял позицию футера на
relative,absolute,fixed. Последнее свойство помогает, но я не хочу видеть футер всегда. Только в внизу, после последнего контейнера. - перетаскивал футер за пределы мейна и обратно. Тоже без особого результата.
@charset "UTF-8"; @import url('https://fonts.googleapis.com/css?family=Montserrat|Nunito+Sans|Roboto&display=swap'); * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } html { scroll-behavior: smooth; word-wrap: break-word; } html, body, header, main { height: 100%; } body { width: 100%; font-family: Roboto, Verdana, sans-serif; font-size: 1em; background-image: url(../images/extra_clean_paper.png); background-repeat: repeat; } header { text-align: center; background-color: yellow; } #hero-header { position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #nav { text-align: center; background-color: dimgray; z-index: 2; } main:not { max-width: 960px; margin: 0 auto; } .container { background-color: #eeeeee; border: 1px solid red; border-radius: 5px; clear: both; overflow: hidden; margin-top: 1em; min-height: 100%; padding: 3.125em 0.625em; -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); } .aboutme .col-40 { margin-top: 1em; padding-left: 1em; padding-right: 1em; width: 39%; } .aboutme .col-60 { margin-top: 1em; padding-left: 1em; padding-right: 1em; width: 59%; } .left { float: left; } .right { float: right; } .table { display: table; border-collapse: collapse; table-layout: fixed; } .hobbies .table-row { display: table-row; border-bottom: 0.1em solid darkgrey; } .hobbies .table-row:last-child { border: 0; } .hobbies .table-cell { display: table-cell; padding-left: 1em; padding-right: 1em; vertical-align: middle; text-align: center; width: 50%; } .portfolio .col-50 { margin-top: 1em; padding-left: 1em; padding-right: 1em; width: 49%; } .projects .flex-row { display: flex; flex-wrap: wrap; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .projects .col-33 { position: relative; width: 100%; max-width: 33%; -ms-flex: 0 0 33%; -webkit-box-flex: 0; -webkit-flex: 0 0 33%; flex: 0 0 33%; } .projects .services-box { background: #f9f9f9; padding: 10px; margin: 20px 5px 0 5px; } footer { background: red; height: 50px; width: 100%; position: relative; bottom: 0; }<header id="link-hero-page"> <div id="hero-header"> </div> </header> <nav> <ul id="nav"> </ul> </nav> <main> <section id="link-main" class="aboutme container"> <div class="col-40 left"> </div> <article class="col-60 right"> </article> </section> <section id="link-hobbies" class="hobbies container"> <div class="table"> <div class="table-row"> <article class="table-cell"> </article> </div> <div class="table-row"> <div class="table-cell"> </div> <article class="table-cell"> </article> </div> <div class="table-row"> <article class="table-cell"> </article> </div> </div> </section> <section id="link-portfolio" class="portfolio container"> <article class="col-50 left"> </article> <article class="col-50 right"> </article> </section> <section id="link-projects" class="projects container"> <div class="flex-row"> <div class="col-33"> <article class="services-box"> </article> </div> <div class="col-33"> <article class="services-box"> </article> </div> <div class="col-33"> <article class="services-box"> </article> </div> </div> </section> <section id="link-contacts" class="contacts container"> </section> </main> <!--FOOTER--> <footer> <address> <p style="text-align: center;">LOREM LOREM LOREM LOREM LOREM</p> </address> </footer>https://jsfiddle.net/0gxpakuo/
