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;
}
Source: stackoverflow.com
Related Query
- How to override one page over other in Reactjs?
- how to navigate from one page to other page using react-router-dom-v6 in class-based component?
- How could i use the routing in reactjs to redirect from one page after loading to another url
- How do i send the data from one page to the other using history.push
- How to load page contain ReactJs into other page using jquery ajax
- How to display one html element over common boundary between other two html elements?
- Reactjs - how can i take input from one component(inputbox) and use it in other component
- ReactJS :: How to Show Only Relevant Menu Items and Hide Other Menu Items Upon Page Change
- How to add one object to other all objects in ReactJs
- reactjs: select box with FormGroup, how to route to other page when one option is selected
- How to get state from one component to other in a different url in REACTJS with hooks?
- ReactJS - I am getting the error"r Invariant failed - not use <Link> outside a <Router>" - this happens in one page but not other pages
- ReactJS - How to pass state data and functions from one functional component to other component?
- How to navigate from one page to another with Airtable.com reactjs
- How can i get data or pass a data from one page to another after submitting a form in reactjs
- how to navigate from one page to another in react js?
- How does react-router persist location state over page refreshes?
- How to serve apple-app-site-association file on /apple-app-site-association page in ReactJS
- How to fill an entire page with one image in react-pdf?
- How to define property in one component and pass to other component in reactJs?
- How to server side redirect to other page without reloading the page and still keeping the url in Nextjs app?
- "material-table" - How to add more rows per page and fix rendering - ReactJs
- How to draw over other apps in React-native?
- How to move two buttons one to the left and the other to the right in the same inline?
- ReactJS how to maintain State value when refreshing page
- multiple forms in one page - reactjs
- How to redirect one page to another page in reactJS?
- how to set the antd table page size in reactjs
- Prevent page scrolling when mouse is over one particular div
- How can I make the edit-mode field type of one material-table column dependent upon the value of another column, without affecting other rows?
More Query from same tag
- unexpected token reactjs app on codesandbox
- How to add a React method to an object outside of React
- Trouble requiring too many images in React Native
- Filtering Data in React
- Hook state one behind prop state
- React : How to change route on onChange event of input
- React inline styling dynamic image url not working
- How to reset state with componentDidMount?
- React.js setState on page load not working, how to fix
- Refs Must Have Owner Warning
- Font Awesome icon in React
- Jest TypeError: is not a constructor in Jest.mock
- Removing a class from "untoggled" items and assigning it to selected item in React
- How can I stop duplicate array in my React - using infinite scroll?
- ReferenceError: Cannot access 'steps' before initialization
- React Jest creating error "new Error('...')" exit and fail testing immediately
- Can't make react router work with multi-layer routes with parameters
- How to Fit Boundaries and Center React Google Maps
- webpack-dev-server react-router push state
- How to Re-load ReactJS Component in Vanilla HTML / JS?
- How to crop an image with CSS using width, height, x and y axis?
- How to add/remove from reactjs element in onClick event
- React-router does not render
- React event handler sets to null after API call
- How do I use React classes now in Ruby on Rails with WebPack
- react-phone-number-input validation failure
- How to add and remove table rows Dynamically in React.js
- Change file object to normal object in React
- Where can I find .eslintrc in CRA?
- componentDidUpdate called twice every route change