绝对定位元素高度超过移动设备上的父级

Question

我有一个带有背景图像的元素，该元素在底部包含一个绝对定位的元素。

当屏幕宽度变窄时，绝对定位的元素高度会增加并超过父元素。众所周知，位置绝对元素脱离了流，所以父高度不会改变。

$(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>

有没有办法将.overlay 保留在底部，但显示所有内容？ CSS有类似的解决方案吗？

Answer 1

通过使一个属性或另一个属性相对于另一个来限制比例。

background-size: 100% auto;

编辑：

Use responsive SVG as the .overlay 避免布局重排。如果适合您的工作流程或舒适度，也可以将内容输出为图像。