Как прибить footer к низу страницы?
Я уже заманался с ним, ни в какую не хочет прибиваться, ни с флексами, ни с марджинами, ни с bottom
Вот код css (all.css):
*{
padding: 0;
margin: 0;
border: 0;
}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display: none;}
button{cursor:pointer;}
button::-moz-focus-inner{padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;
font-weight: 400;}
@font-face{font-family:"arreg"; src: url("../fonts/ArialRegular.ttf") format("truetype");}
*{color: white;
font-size:20;
font-family:arreg;}
.wrapper{border-left: 1px solid #1100ff; border-right: 1px solid mediumblue;}
.button {
text-decoration: none;
display: inline-block;
width: 140px;
height: 45px;
line-height: 45px;
border-radius: 45px;
margin: 10px 20px;
font-family: 'Montserrat', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 600;
color: #524f4e;
background: white;
box-shadow: 0 8px 15px rgba(0, 0, 0, .1);
transition: .3s;
color: black;
}
.button:hover {
background: #f10000;
box-shadow: 0 15px 20px rgb(151, 0, 0);
color: white;
transform: translateY(-7px);
}
#l1{background-color: aqua; height: 1px;}
.wrapper{background-color: black;height:100%;}
#zgl{margin: 0 auto;}
@media (max-width:1200px){
.wrapper{max-width:970px;}
}
@media (max-width:992px){
.wrapper{max-width:750px;}
}
@media (max-width:767px){
.wrapper{max-width:none;}
}
html,body{height: 100%;}
footer{
color:red;
width:auto;
text-align: center;
background: #000 url(../background/p1.gif);
index.css
.hell{text-align:center;}
.hello{font-size: 30; padding-top: 1%;padding-bottom: 1%;}
.t1{width: 500px;margin: 0 auto;}
.txt{text-align:justify;padding-bottom: 1%;padding-top:1%;}
.knpk{margin: 0 auto;}
#i{color: red;}
*{background-color: black;position: static;}
.wrapper{height: 100%;text-align: center;}
и index.html
<DOCTYPE html>
<html lang="ru">
<head>
<title>Axoloteam</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
</head>
<body>
<div class="wrapper">
<svg version="1.1" id="zgl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="60">
<style type="text/css">
text{
filter: url(#filter);
fill: white;
font-size:40px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}
</style>
<defs>
<filter id="filter">
<feFlood flood-color="black" result="black" />
<feFlood flood-color="red" result="flood1" />
<feFlood flood-color="limegreen" result="flood2" />
<feOffset in="SourceGraphic" dx="3" dy="0" result="off1a"/>
<feOffset in="SourceGraphic" dx="2" dy="0" result="off1b"/>
<feOffset in="SourceGraphic" dx="-3" dy="0" result="off2a"/>
<feOffset in="SourceGraphic" dx="-2" dy="0" result="off2b"/>
<feComposite in="flood1" in2="off1a" operator="in" result="comp1" />
<feComposite in="flood2" in2="off2a" operator="in" result="comp2" />
<feMerge x="0" width="100%" result="merge1">
<feMergeNode in = "black" />
<feMergeNode in = "comp1" />
<feMergeNode in = "off1b" />
<animate
attributeName="y"
id = "y"
dur ="4s"
values = '104px; 104px; 30px; 105px; 30px; 2px; 2px; 50px; 40px; 105px; 105px; 20px; 6ßpx; 40px; 104px; 40px; 70px; 10px; 30px; 104px; 102px'
keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
repeatCount = "indefinite" />
<animate attributeName="height"
id = "h"
dur ="4s"
values = '10px; 0px; 10px; 30px; 50px; 0px; 10px; 0px; 0px; 0px; 10px; 50px; 40px; 0px; 0px; 0px; 40px; 30px; 10px; 0px; 50px'
keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
repeatCount = "indefinite" />
</feMerge>
<feMerge x="0" width="100%" y="60px" height="40px" result="merge2">
<feMergeNode in = "black" />
<feMergeNode in = "comp2" />
<feMergeNode in = "off2b" />
<animate attributeName="y"
id = "y"
dur ="4s"
values = '103px; 104px; 69px; 53px; 42px; 104px; 78px; 89px; 96px; 100px; 67px; 50px; 96px; 66px; 88px; 42px; 13px; 100px; 100px; 104px;'
keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 0.548; 0.577; 0.613; 1'
repeatCount = "indefinite" />
<animate attributeName="height"
id = "h"
dur = "4s"
values = '0px; 0px; 0px; 16px; 16px; 12px; 12px; 0px; 0px; 5px; 10px; 22px; 33px; 11px; 0px; 0px; 10px'
keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 1'
repeatCount = "indefinite" />
</feMerge>
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode in="merge1" />
<feMergeNode in="merge2" />
</feMerge>
</filter>
</defs>
<text y="45" x="42%">Axoloteam</text>
</svg>
<hr id="l1">
<div class="hell" >
<p class="hello">Salutation, meine freunde!</p>
</div>
<div class="t1">
<p class="txt">Данный ресурс был сделан мной,(<span id="i">Amorisck</span>'ом) дабы ознакомить людей с моим творчеством. В будущем я буду дорабатывать и улучшать сайт, и рано или поздно вы увидите полноценную социальную сеть, а пока это не произошло, предлагаю вам ознакомиться с моим творчеством, либо поддержать меня (мои контактные данные находятся в разделе информации (пожалуйста, напишите мне хоть кто-нибудь, я очень хочу поговорить))</p>
</div>
<div class="knpk">
<button>
<a href="Stalkertale.html" class="button">Stalkertale</a>
</button>
<button><a href="support.html" class="button">информация</a></button>
<button><a href="art.html" class="button">арты</a></button>
</div>
<footer>©Q5 CORP</footer>
</div>
<link rel="stylesheet" href="css/all.css"></link>
<link rel="stylesheet" href="css/index.css"></link>
</body>
</html>
Если сможете помочь мне решить эту непостижимую для меня задачу, при том без помощи костылей, буду очень благодарен, ибо какой уже день голову над этим ломаю, при том пытаясь сделать это с закосом под адаптив