Why wont background colour show?-CodePudding

I'm trying to make a page that takes up 100% of the height split into red, blue, green. I did that with css grid but the background colour isn't showing up.

Could someone explain to me why its not showing up and how to fix it?

body, html {
    
    margin: 0;
    padding: 0;
    font-family: 'lato', sans-serif;

}

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
        "l l l c c c c c c c r r";
}

.left-area {
    grid-area: l;
    background-color: red;
}

.chat-area {
    grid-area: c;
    background-color: green;
}

.right-area {
    grid-area: r;
    background-color: blue;
}

https://jsfiddle.net/ukL1vbgn/

CodePudding user response：

There is no content in your <div> elements, so they are technically 0px height and 0px width. You can use the width & height CSS-properties to specify their size, or simply just put content into them - doing either will show the element's background-color

body, html {
    
    margin: 0;
    padding: 0;
    font-family: 'lato', sans-serif;

}

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
        "l l l c c c c c c c r r";
}

.left-area {
    grid-area: l;
    width: 100px;
    height: 100px;
    background-color: red;
}

.chat-area {
    grid-area: c;
    width: 100px;
    height: 100px;
    background-color: green;
}

.right-area {
    grid-area: r;
    width: 100px;
    height: 100px;
    background-color: blue;
}

<!DOCTYPE html>
<html>


<head>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap"
        rel="stylesheet">
</head>

<body>
    <div >
        <div >
          test
        </div>

        <div >
          test
        </div>

        <div >
          test
        </div>

    </div>


</body>

</html>

CodePudding user response：

By default, neither your .container nor the body has a height greater than zero. To fix this, add a width and height to the body element as well as a height to the .container element. Below is an example that should work as expected.

body, html {
    
    margin: 0;
    padding: 0;
    font-family: 'lato', sans-serif;
    height: 100vh;
    width: 100%;

}

.container {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100%;
    grid-template-areas: 
        "l l l c c c c c c c r r";
}

.left-area {
    grid-area: l;
    background-color: red;
}

.chat-area {
    grid-area: c;
    background-color: green;
}

.right-area {
    grid-area: r;
    background-color: blue;
}

<!DOCTYPE html>
<html>


<head>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap"
        rel="stylesheet">
</head>

<body>
    <div >
        <div >

        </div>

        <div >

        </div>

        <div >

        </div>

    </div>


</body>

</html>

CodePudding user response：

I think that's happening because the div elements don't have any content inside them. You can put somenthing inside them or define a height: 100vh into your areas.