css - 绝对定位的 div 扩展相对定位的父 div

Question

我搜索了各种问题，这些问题似乎都能够将绝对子级扩展到其相对父级之外。我正在努力避免这种情况。

我有一个位置为:相对的div；包含一个位置为:绝对的div；我想始终坐在 div 的底部。当我设置 bottom:0px;绝对子级超出父级 div 4 px。可以通过设置bottom:4px来解决；但是当我开始使网站响应时，这样的绝对数字将无法解决问题。

html:

<a href="her.html">
    <div class="next_movie">
        <img src="img/her_header.jpg" alt="Picture from the movie 'Her'">
        <div class="movie_info">
           <h2>Her (2013) March 6th in AUD1</h2>
         </div>
    </div>
</a>

CSS:

.movies {
    width: 616.6px;
    height:663px;
    background-color: #e3e3e3;
    margin-top: 75px;
    position: absolute;
    left:233.3px;;
}
.movie_info, .poster_info {
    color:white;
}
.next_movie {
    position:relative;
    margin:16.6px;

}
.movie_info{
    position:absolute;
    left:0px;
    bottom:0px;
    width:582.5px;
    height:56.6px;
    background:rgba(0,0,0,0.5);
    color:white;
    font-size:25px;
    line-height: 2.3;
}
.movie_info h2 {
    margin-left:15.8px;
}

该站点的测试版本位于此处: http://jhalland.dk/test/

Answer 1

您应该尝试从您的 movie_info 样式中删除高度。或者您可以将其更改为最小高度。由于您已将行高定义为 2.3

，因此您的规则存在冲突