Menu
I have two <div> with the position: absolute. One is at the top and the other is at the bottom the page. The one at the bottom of the page goes lower than the last element (footer). My problem is that even if my <div> is in position: absolute and should be removed from the flow, my page extends to fit the <div> that is "overflowing". How can I make the page crop everything that exceeds my footer?
Here's what I'm talking about:
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>
927
Why the bottom of the page is not cropping my absolute positioned element
It's not supposed to be cropping it. That's how it is supposed to work. Just because an element is absolutely positioned, does not mean the parent container won't stretch to accommodate it.
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
