Currently, I am in the process of creating a template page that includes a navbar and a footer with the intention of adding additional columns within the main div (container-fluid) at a later stage. However, I have encountered two issues that I cannot seem to resolve. The footer, which serves as a logging space, remains fixed at the bottom of the page and is updated with logs each time an action is performed. In some cases, the content may exceed the available space, causing a scrollbar to appear. The navbar is your standard, run-of-the-mill navbar. The problem arises when attempting to populate the container with either random data or a textarea. The main div (and the body itself) end up being larger than the main view, causing them to overflow into the footer. Where am I going wrong?
If you would like to view the code, you can do so via this jsfiddle link: link
It's worth noting that the two sections are colored different to highlight the issues. The lightcyan section should occupy the screen above the footer without growing larger once it reaches it (you can test this by expanding the textarea).
Initially, my thought was to set the html and body to a height of 100%, disregard the navbar (due to uncertainty regarding its exact height), maintain the fixed height of the footer (which is necessary for logging purposes), and calculate the height of the main div accordingly. However, this approach has not proven successful. Please note that some of the code is adapted from examples sourced from the Bootstrap website.
<body>
<header>
<nav></nav>
</header>
<div class="container-fluid">textarea and columns here</div>
<footer>
<div class="content">connecting..</div>
</footer>
</body>