article { height: 200px; border: 1px solid red; } footer { border: 1px solid yellow; } .outer { height: 100%; } section.inner1 { height: 50px; background-color: lime; } section.inner2 { background-color: lightgrey; height: 100%; border-radius: 30px; }
<article> <div class="outer"> <section class="inner1"> Section 1 should be a constant height </section> <section class="inner2"> Section 2 should fill the rest of the page down to the footer but not cover the footer </section> </div> </article> <footer>This is the footer</footer>