I created a new React app with the follwing index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/main.tsx"></script>
</body>
</html>
The root component contains some nested child elements applying a margin
function App() {
return (
<>
<div>
<div style={{margin: "40px"}}>Foo</div>
</div>
</>
);
}
I want to stretch the body height across the whole screen and tried this in the index.css file
body {
margin: 0;
min-height: 100vh;
background: red;
}
This works as expected but now I have a vertical scrollbar on the right side although the displayed content is smaller than the screen height.
How can I fix that?