To be more specific, I am looking to have the content section (the section with the white background) fill the remaining space on the page so that the header and footer maintain their fixed sizes while the content section expands to fit the full height of the viewport.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Home - Painter Master Gen</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/script.js"></script>
<link rel="shortcut icon" type="image/png" href="img/favicon.ico">
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="last-modified" content="21.10.2018 08:22:20">
<meta charset="UTF-8">
<meta name="author" content="Til Jungbluth">
<meta name="description" content="This is where a description will go...">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<div id="headerWrapper">
<header id="header">
<a href="index.html"><img id="headerLogo" src="img/Logo Painter Guild.jpg" alt=""></a>
<h1 id="headerHeading">Painter Master Gen</h1>
<p id="headerSlogan"><span id="design">Design</span> - <span id="beauty">Beauty</span> - <span id="protection">Protection</span></p>
</header>
<nav id="headerNav">
<a href="index.html" class="headerNavLinks" id="headerNavLinkActive">Home</a>
<a href="our_team.html" class="headerNavLinks">Our Team</a>
<a href="contact.html" class="headerNavLinks">Contact</a>
</nav>
</div>
<div id="contentWrapper">
<h2 id="contentHeading">Lorem ipsum dolor sit amet</h2>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
...
</div>
</div>
<footer id="footer">
<p id="footerP">© Painter Master Gen GmbH |
<a href="contact.html" class="footerNavLinks">Contact</a> |
<a href="imprint.html" class="footerNavLinks">Imprint</a>
</p>
<button onclick="topFunction()" id="scrollBackToTop" title="Go to top">Back To Top</button>
</footer>
</div>
</body>
</html>
This is the corresponding CSS:
... (CSS code omitted for brevity)