Is there a way to create a footer that stays at the bottom of the screen but also expands from the top based on the position of a specific element? I want it to have a fixed bottom position while adjusting its top side as needed. How can I achieve this?
.main {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
width: 100%;
height: 100%;
}
.content {
position: relative;
margin-left: 10%;
margin-right: 10%;
}
.left-content {
float: left;
margin: 2.27272727272727%;
/* 20/880 = 0.0227272727272727 */
width: 56.81818181818182%;
/* 500/880 = 0.5681818181818182 */
background-color: aquamarine;
}
.right-content {
float: left;
margin: 2.27272727272727%;
/* 20/880 = 0.0227272727272727 */
width: 34.09090909090909%;
/* 300/880 = 0.3409090909090909 */
background-color: mediumturquoise;
}
.inner-content {
float: left;
margin: 2%;
/* 10/500 = 0.02 */
width: 44%;
/* 220/500 = 0.44 */
background-color: darkgreen;
}
.footer {
clear: both;
height: 10%;
bottom: 0px;
width: 100%;
position: absolute;
background-color: darkcyan;
}<div class="main">
<div class="content">
<div class="left-content">
<h1>A</h1>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<div class="inner-content">
<h1>D</h1>
</div>
<div class="inner-content">
<h1>D</h1>
</div>
</div>
<div class="right-content">
<h1>B</h1>
<p>asd</p>
<p>asd</p>
</div>
</div>
<div class="footer">
<h1>C</h1>
</div>
</div>