如何使DIV占用剩余空间到底部的绝对位置容器中

Question

• 我有一个容纳图像，一些文本和页脚的容器
• 该图像位于顶部，下方是文本，其后是仅包含一些其他元数据的页脚
• 我希望能够将鼠标悬停在内容上（不包括页脚）并将其突出显示
• 我的问题是我无法使“文本” div一直延伸到绝对定位页脚开始的底部。
• 页脚将独立突出显示悬停。 我不希望内容悬停影响页脚，也不想让页脚悬停影响内容
• 这是一个指向示例的codepen链接，该示例显示蓝色突出显示仅覆盖文本的底部，而不是整个面板，直到元数据页脚http://codepen.io/anon/pen/bVNeqr

这里的帮助或指导将不胜感激。

的HTML

 <div class="item">
     <div class="content"> 
         <div class="image">
             <img src="http://lorempixel.com/output/city-q-c-300-200-4.jpg"/>
         </div>
         <div class="text"> Text here </div>
     </div>
     <div class="footer"> Footer </div>
 </div>

Answer 1

安装position:absolute可以使用css3的“ flex”属性来解决此问题。 尝试将其添加到您的代码中。

.item {
    display:flex;
    flex-direction:column;
}
.content {
    flex-grow:1;
}

这是一个例子

Answer 2

像这样吗 我只是添加了一些简单的CSS内容，而且看起来工作正常。

http://codepen.io/KingK/pen/bVNeoo/

 .text
   { height: auto; }