I currently have an element with a background image that includes an absolutely positioned element at the bottom.
As the screen width decreases, the height of the absolutely positioned element increases and surpasses the parent element. Since absolutely positioned elements are removed from the flow, the height of the parent remains unchanged.
$(window).ready(function() {
if ($(window).width() <= 767) {
var heig = $('.overlay').height(),
parent = $('.parent');
parent.css('height', heig + 300 + 'px');
}
});html,
body {
margin: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
.parent {
position: relative;
min-height: 100vh;
background-image: url(http://placehold.it/1000);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.overlay {
background: #376c8d;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
text-align: center;
padding: 30px 20px;
border-radius: 160px 160px 0 0;
font-size: 24px;
opacity: 0.8;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="overlay">
<img src="http://placehold.it/100" />
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing eli</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="/">Link</a>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing eli</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="/">Link</a>
</div>
</div>Is there a way to ensure that the .overlay stays at the bottom while displaying all content? Is there a CSS-based solution for this scenario?