У меня есть два <div> с position: absolute. Один вверху, а другой внизу страницы. Один внизу страницы опускается ниже, чем последний элемент (нижний колонтитул). Моя проблема в том, что даже если мой <div> находится в position: absolute и должен быть удален из потока, моя страница расширяется до размера "1005 *", который "переполнен". Как я могу заставить страницу обрезать все, что превышает мой нижний колонтитул?
Вот что я говорю:
body{
position: relative;
}
p{
width: 80%;
font-size: 50px;
margin: 0;
}
footer{
margin-top: 200px;
position: relative;
}
.bg_gradient.first{
position: absolute;
top: 0;
left: 0;
width: 1000px;
height: 1000px;
transform: translate(-400px, -400px);
background: radial-gradient(circle, rgba(254,73,70,1) 0%, rgba(254,73,70,0) 70%);
z-index: -1;
}
.bg_gradient.last{
position: absolute;
bottom: 0;
left: 0;
width: 1000px;
height: 1000px;
transform: translate(-400px, 400px);
background: radial-gradient(circle, rgba(254,73,70,1) 0%, rgba(254,73,70,0) 70%);
z-index: -1;
}
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum voluptas incidunt nulla necessitatibus rerum illum provident ea earum neque officia nam deserunt animi nostrum iusto velit distinctio, dolor eveniet voluptates.</p>
<div class="bg_gradient first"></div>
<div class="bg_gradient last"></div>
<footer>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eligendi maiores dolore mollitia animi a fugit saepe perferendis unde, sequi debitis sint ratione, recusandae tempora quis culpa vitae sed assumenda!</p>
</footer>
</body>