React Force Background Color Full Height

React force background color full height

Instead of using height:100% you may try height:100vh. Using % is relative to the parent height but using vh is relative to the height of the viewport. So making 100vh will ensure that the block fill all the height of the screen.

You can read more about here

Set background image to full screen in Reactjs

Try using the specific property values.

In Index.css:

body, html {
    height: 100%;
    margin: 0;
}

In Login.css:

.Login-component {
    /* The image used */
    background-image: url(../static/login-bg.jpg);

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

React cannot set div to take 100% of screen height

You can use 100vh (1vh is relative to 1% of the height of the viewport):

function App() {
  return (
    <div style={{ minHeight: "100vh", background: "red" }}></div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById("root")
);

html,
body {
  padding: 0;
  margin: 0;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="root"></div>

The background is clipped when scrolling

the problem is that the height is set as 100vh.

at big screens is works perfect. But at small screens we don't now the real scroll height - it depends on browser window resolution

we need to use useRef Hook and watch the element's scroll height change

const appMenuRef = useRef(null)
const [fullHeight, setFullHeight] = useState('100vh')

useEffect(() => { 
    if (!isNull(appMenuRef.current)) {
      setFullHeight(`calc(${appMenuRef.current.scrollHeight - appMenuRef.current.scrollTop}px)`)
    }
  }, [appMenuRef])

now we can set this fullHeight as css inline property to problematic element

React Force Background Color Full Height