为什么背景颜色不显示？

发布于 2025-01-11 22:37:03 字数 677 浏览 2 评论 0原文

我正在尝试制作一个占据 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/

原文

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/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不美如何 2025-01-18 22:37:03

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

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

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

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

    </div>


</body>

</html>

回复收藏 0 原文

怪我太投入 2025-01-18 22:37:03

我认为发生这种情况是因为 div 元素内部没有任何内容。您可以在其中放置一些东西或在您的区域中定义一个 height: 100vh 。

回复收藏 0 原文

自演自醉 2025-01-18 22:37:03

默认情况下，.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>

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

        </div>

        <div class="chat-area">

        </div>

        <div class="right-area">

        </div>

    </div>


</body>

</html>

回复收藏 0 原文

~没有更多了~