Fill vertical

Has footer expanding with content

by TheoI

HTML

<div class="parent">
    <div class="header"></div>
    <div class="content">
        <div class="stuff"></div>
    </div>
    <div class="footer"></div>
</div>

CSS

.parent {
    position: relative;
    height: 500px;
    width: 200px;
    background-color: black;
}

.header {
    position: absolute;
    top: 0;
    height: 100px;
    width: 100%;
    background-color: red;
}

.footer {
    position: absolute;
    top: 205px;
    margin-top: -100px;
    height: 100px;
    width: 100%;
    background-color: yellow;
    
    -webkit-transition: all 2s;
transition: all 2s;
}

.parent:hover .footer {
    top: 100%;
}

.content {
    position: absolute;
    padding-top: 105px; 
    padding-bottom: 105px;
    height: 205px;
    width: 100%;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
    
-webkit-transition: all 2s;
transition: all 2s;
}
.stuff {
    height: 100%;
    width: 100%;
    background-color: green
}

.parent:hover .content {
    height: 100%;
}