Tengo un elemento con una imagen de fondo que contiene un elemento de posición absoluta en la parte inferior.
Cuando el ancho de la pantalla se vuelve más estrecho, la altura del elemento absolutamente posicionado aumenta y supera al elemento principal. Como se sabe, los elementos absolutos de posición salen del flujo, por lo que la altura principal no cambia.
$(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> ¿Hay alguna manera de mantener el .overlay en la parte inferior, pero se muestra todo el contenido? ¿Hay una solución similar con CSS?
Restringe la proporción haciendo una propiedad u otra relativa a la otra.
background-size: 100% auto;Editar:
Utilice SVG receptivo como superposición para evitar el reflujo del diseño. O emita el contenido como una imagen si se adapta a su flujo de trabajo o nivel de comodidad.