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.