Есть ли какая-нибудь возможность прикрепить футер к низу страницы, не изменяя разметку контейнера и мейна.
На данный момент пробовал все что умею и знаю:
- менял позицию футера на
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>