如何让一个 DIV 占用剩余的 space 到底部的绝对定位容器

Question

我有一个包含图像、一些文本和页脚的容器
图像位于顶部，文本位于下方，后跟仅包含一些额外元数据的页脚
我希望能够将鼠标悬停在内容（不包括页脚）上并使其全部突出显示
我遇到的问题是我无法使 "text" div 一直延伸到绝对定位页脚开始的底部。
页脚将在悬停时独立突出显示。我不希望内容悬停影响页脚，也不希望页脚悬停影响内容悬停
这是一个 codepen link 示例，它显示蓝色突出显示仅覆盖文本底部，而不是整个面板，直到元数据页脚 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

是这样的吗？我刚刚添加了一些简单的 CSS 东西，它似乎工作正常。

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

 .text
   { height: auto; }

Answer 2

代替position:absolute你可以使用css3"flex"属性来解决这个问题。尝试将其添加到您的代码中。

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

这里是an example

如何让一个 DIV 占用剩余的 space 到底部的绝对定位容器

How to make a DIV take up the remaining space to an absolute positioned container at the bottom

html

css

css-position

hover