Currently, I am working on a webpage where the footer expands based on a specific event. My challenge is to ensure that the footer grows in proportion to the available space on the page. You can take a look at my code snippet or the corresponding jsFiddle link. What I want is for the grey footer to stretch all the way up to the colored elements with variable height instead of being fixed at 20% as it currently appears. One approach could involve calculating the combined height of the elements above, but that doesn't seem like an optimal solution.
Check out the live demonstration on jsFiddle here
<html>
<head>
<style type="text/css">
body #pagePlaceHolderOuter {
background: #FFFFFF;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner {
height: 100%;
margin: 0 auto;
max-width: 1000px;
min-width: 700px;
width: 70%;
position: relative;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div1 {
width: 100%;
height: 100px;
background: blue;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div2 {
width: 100%;
height: 120px;
background: green;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .div3 {
width: 100%;
height: 60px;
background: red;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
background: gray;
bottom: 0;
height: 10%;
position: absolute;
width: 100%;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$("#btn").click(function () {
$('body #pagePlaceHolderOuter #pagePlaceHolderInner .footer').css('height', '20%');
});
</script>
<div id="pagePlaceHolderOuter">
<div id="pagePlaceHolderInner">
<button type="button" id="btn">Click Me!</button>
<div class="div1">I have a dynamic height</div>
<div class="div2">I have a dynamic height</div>
<div class="div3">I have a dynamic height</div>
<div class="footer">Footer</div>
</div>
</div>
</body>
</html>