score:2

it sounds like you'd like your new page component to take up all the room of the page except for top and bottom navigation.

the solution is entirely css, however you'll need to tinker with styles to get margins/padding correct. it looks like you're using a ui library which can clash with your style sheet.

here are the changes:

update your main container to use flexbox instead of trying to control for top/bottom navs with pixels

#root {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

then, get your new page component to expand by adding a flex 1. added red border to easily visualize change.

.newpagecss {
    margin-top: 80px;
    border: 2px solid red;
    flex: 1;
}

update your home page so bottom nav sticks to bottom and you can scroll home content

.homepagecss {
    margin-top: 80px;
    max-height: 50%;
    /* position: relative; */
    flex: 1;
    max-height: 70vh;
    overflow: auto;
}

position fixed is now unnecessary for bottom nav

.makestyles-gridlist-2 {
    width: 100%;
    border: 1px solid grey;
    /* bottom: 0px; */
    /* position: fixed; */
    padding: 0;
    flex-wrap: nowrap;
    background: white;
}

Related Query

More Query from same tag