I've encountered an issue while transferring my project to NextJS from Create-React-App.
In NextJS, setting the height of a section to 100% is causing it to take up the entire page height instead of adjusting for the header and footer elements. I need the content's minimum height to fit perfectly so that the footer always aligns at the bottom of the screen.
Here's a visual representation of the problem: section
The section extends to 100% of the page height even though there's a header with a minimum height of 5rem and a footer with a minimum height of 20rem.
This is the structure of the HTML: HTML structure
All these elements - Navbar, Section, and Footer - are nested under the same div ("__next") which also has a height set to 100%.
I'm having trouble understanding why the section takes up 100% of the viewport height instead of the available space.
Any assistance on this matter would be greatly appreciated!
Below are some relevant code snippets:
/* Setting the height of all direct children of body (the __next div) */
body > div {
height: 100%;
}
/* Setting the height of the section */
section {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}