I have an element with a background image that contains an absolute positioned element at the bottom.
When the screen width gets narrower, the absolutely positioned element height gets increased and exceeds the parent element. As known that position absolute elements get out of the flow, so the parent height is not changed.
$(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 is a way to keep the .overlay at the bottom, but all content is shown? Is there is a similar solution with CSS?
Constrain the proportion by making one property or another relative to the other.
background-size: 100% auto;
Edit:
Use responsive SVG as the .overlay to avoid layout reflow. Or output the content as an image if that suits your workflow or comfort level.