javascript - 图片重叠 div 响应问题

Question

在此页面中，基本上是此处的轮播页面: http://getbootstrap.com/examples/carousel/

我对其进行了编辑，添加了一个包含与 div 重叠的图像的部分。现在总的来说，它看起来像我想要的，但是当您更改浏览器窗口的分辨率时，文本的布局会发生变化，因此在一种分辨率下整个段落被 chop ，在另一种布局上 chop 较少，因此取决于我最终得到的文本在不同的分辨率下，它可能会或可能不会被切断。我可以增加蓝色部分的高度以适应，但我真正想要的是扩展它以适应文本并留出一些填充底部。

我如何使它保持一致，以便在文本之后始终有 40 像素的填充，并且所有文本都显示在图像下方的蓝色部分中？

网址在这里: http://192.34.63.75/test.html

只有我编辑的 css 是:

<style>
    .blue {
        color: #ffffff;
        background-color: #009cde;
        background-image: radial-gradient(circle farthest-side at center bottom, #009cde, #003087 125%);
        height:500px;
    }

    #situational {
        padding-top:100px;
        margin:0 auto;
        text-align: center;
        height:450px;
    }

    .overlap-image {
        max-width: 100%;
        height:auto;
        position:relative;
        z-index:10;
    }
</style>

Answer 1

.blue {
    color: #FFF;
    background-color: #009CDE;
    background-image: radial-gradient(circle farthest-side at center bottom , #009CDE, #003087 125%);
    height: 500px;
}

改为

.blue {
    color: #FFF;
    background-color: #009CDE;
    background-image: radial-gradient(circle farthest-side at center bottom , #009CDE, #003087 125%);
    padding-bottom:50px;
}

div 将占据段落的高度，并在底部添加 50px 的内边距。切勿在响应式 div 上设置固定高度。让div的内容控制div的高度。