27 replies

Make div "behave" like body element

Considering this simple HTML:

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <div id="app-root"></div>
    </body>
</html>

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <div id="app-root"></div>
    </body>
</html>

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <div id="app-root"></div>
    </body>
</html>

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <div id="app-root"></div>
    </body>
</html>

What is the best way to make the

#app-root

#app-root

#app-root

#app-root div "behave" like the

<body>

<body>

<body>

<body> element?

For example, if I set

background-color: red;

background-color: red;

background-color: red;

background-color: red; on the

<body>

<body>

<body>

<body> element, the page obviously becomes red. But if I do the same to

#app-root

#app-root

#app-root

#app-root nothing happens (obviously) because there's no content inside of it. But I want

#app-root

#app-root

#app-root

#app-root to behave like the

<body>

<body>

<body>

<body> element.