How to Create a Fixed Header, Footer, and Sidebar Layout with Scrollable Content in Electron?

I am working on an Electron application with a specific layout requirement and encountering issues with unwanted scrollbars. I need the header, footer, and navigation sidebar to remain fixed in position, with only the main content area being scrollable when its content exceeds the viewport. The entire window is set to a height of 600px, and no component outside the main content should scroll.

Here is my current CSS:

body {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-areas:
        "header header"
        "nav content"
        "footer footer";
    grid-template-rows: 100px 1fr 20px; /* Header height, content taking the rest, footer height */
    grid-template-columns: 150px 1fr; /* Navigation width, content taking the rest */
    min-height: 100vh;
    font-family: Arial, sans-serif;
}

#header {
    grid-area: header;
    background: #f0f0f0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
}

#nav {
    grid-area: nav;
    background: #f0f0f0; /* Different color to distinguish nav area */
    top:60px;
    bottom:30px;
    width: 150px;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    left:0;
    position: fixed;
}

#content {
    grid-area: content;
    background: #f0f0f0;
    padding: 20px; /* Padding for content for better readability */
    overflow-y: auto; /* Enables scrolling if the content is taller than the screen */
}

#footer {
    grid-area: footer;
    background: #f0f0f0; /* Matching the header */
    padding: 10px; /* Consistent padding with the header */
    width: 100%;
    position: fixed; 
    bottom: 0;
    height: 30px;
}

and my index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MySoftware Client</title>
    <link rel="stylesheet" href="styles/master.css">
    <script defer src="renderer.js"></script>
</head>
<body>
    <div id="header">
        <div class="logo">
            <img src="../icons/icon.png" alt="My Company" height="40">
        </div>
        <h1>MySoftware</h1>
    </div>
    <div class="window-controls">
        <button id="close-btn">✕</button>
    </div>
    <div id="nav">
        <ul style="padding: 40px;">
            <button id="loadPage-Setup">Setup</button>
            <button id="loadPage-Help">Help</button>
        </ul>
    </div>
    <main id="content">
        <!-- Content will be loaded here -->
    </main>
    <div id="footer">
        <p>MySoftware v1.0.0</p>
    </div>
</body>
</html>

However, a scrollbar appears for the entire window. I want only the content area to have a scrollbar when necessary, without affecting the overall window.

Can anyone help with a minimal working template or correct my CSS to meet these layout requirements in an Electron environment?

I found a similar question, that doesn't involve Electron but they don't work when I copy-paste their solutions into my electron.

Solution

I think as you should set fixed height to content element.

#content {
    grid-area: content;
    background: #f0f0f0;
    padding: 20px; /* Padding for content for better readability */
    height: 80vh; /* can use calc() function or 500px etc. */
    overflow-x: hidden; /* for enable scroller */
}

I hope my answer can help you.