为什么不显示背景颜色？

Question

我正在尝试制作一个页面，该页面占据 100% 的高度，分为红色、蓝色和绿色。我用 css 网格做到了，但没有显示背景颜色。

有人可以向我解释为什么它没有出现以及如何解决它吗？

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/

Answer 1

您的 <div> 元素中没有内容，因此技术上它们的高度为 0px，宽度为 0px。您可以使用 width & height CSS-properties 来指定它们的大小，或者只是将内容放入其中 - 执行任一操作都会显示元素的 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 class="container">
        <div class="left-area">
          test
        </div>

        <div class="chat-area">
          test
        </div>

        <div class="right-area">
          test
        </div>

    </div>


</body>

</html>

Answer 2

默认情况下，您的 .container 和 body 的高度都不大于零。要解决此问题，请向 body 元素添加宽度和高度，并向 .container 元素添加高度。下面是一个应该按预期工作的示例。

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 class="container">
        <div class="left-area">

        </div>

        <div class="chat-area">

        </div>

        <div class="right-area">

        </div>

    </div>


</body>

</html>

Answer 3

我认为这是因为 div 元素中没有任何内容。你可以在里面放一些东西或者在你的区域定义一个height: 100vh。

为什么不显示背景颜色？

Why wont background colour show?

css

grid