- 419
- 226
Хай,есть сайт - tools.mint-plantation.ru и в нем можно увидеть баг,когда пролистываешь вниз - градиент багается
Сам код:
Как починить?
Сам код:
HTML:
<div id="wrap">
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="clicknav()">☰</span>
<h2>Mint Tools</h2>
<p>зачем...</p>
</div>
<div class="footer"><a class = "text">
<h2>Mint Plantation © 2021</h2>
<h3>Все права защищены.Любое копирование материала запрещено!</h3>
<h3>Любое копирование материала запрещено!</h3>
</div>
CSS:
body {
background-image: linear-gradient(135deg,#EAD6EE, #A0F1EA);
font-family: "Lato", sans-serif;
display: flex;
flex-direction: column;
height: -webkit-fill-available;
}
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main {
transition: margin-left .5s;
padding-bottom: 150px;
}
#particles-js{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -50;
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.footer .text {
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-family: "Lato", sans-serif;
}
Как починить?