Make your React app full width and height

make-react-container-full-widht-and-height.md

Go to gists overview

Make your React app full width and height

After creating your basic react app and setting up a styled component it's nice to be able to control the css from "inside" your main component. This is how:

1. Open the file `src/App.css
2. Replace the content with this css

body,
html {
  width: 100%;
  margin: 0;
  background-color: #222;
  color: #fff;
}

html,
body,
#root {
  height: 100%;
}

3. The colors are of course not necessary but helpful to illustrate the point. The page is now covering the full width and height of the screen.
4. Go to your App.js component and add a new styled component inside wrapping your components, for clarity we can call it "Page". The code inside App.js should look like this:

import "./App.css";
import MyFirstComponent from "./components/MyFirstComponent";
import styled from "styled-components";

const Page = styled.div`
  width: 100vw;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
`;

function App() {
  return (
    <Page>
      <MyFirstComponent />
    </Page>
  );
}

export default App;

5. And that's it!

What's next?

Add a full-screen background-image

Thank you!

Thank you, you helped me a lot!