html - 网格区域不适应容器高度
问题描述
body {
font-family: 'Rubik', sans-serif;
.container {
background: red;
width: 80%;
height: 60%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
//Grid
display: grid;
grid-template-rows: repeat(2,1fr);
grid-template-columns: repeat(4,1fr);
gap: 10px;
grid-template-areas:
"report work play study"
"report exercise social selfcare";
report{
grid-area:report;
}
work-container{
grid-area:work;
}
play-container{
grid-area:play;
}
study-container{
grid-area:study;
}
exercise-container{
grid-area:exercise;
}
social-container{
grid-area:social;
}
selfcare-container{
grid-area:selfcare;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/stylesDesk.css">
<link rel="stylesheet" href="normalize.css">
<script src="https://kit.fontawesome.com/7461cf9184.js" crossorigin="anonymous"></script>
<title>Frontend Mentor | Time tracking dashboard</title>
<!-- Feel free to remove these styles or customise in your own stylesheet -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="container">
<!-- Report info container -->
<div class="report">
<div class="info">
<img src="images/image-jeremy.png" alt="">
<div class="person-info">
<h2 class="title">
Report for
</h2>
<h3 class="name">
Jeremy Robson
</h3>
</div>
</div>
<div class="footer">
<p>Daily</p>
<p>Weekly</p>
<p>Monthly</p>
</div>
</div>
<!-- Work category container -->
<div class="work-container">
<div class="img">
<img src="images/icon-work.svg" alt="">
</div>
<div class="work">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Work
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
5hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 7hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
32hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 36hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
103hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 128hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Play -->
<div class="play-container">
<div class="img">
<img src="images/icon-play.svg" alt="">
</div>
<div class="play">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Play
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 2hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
10hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 8hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
23hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 29hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Study -->
<div class="study-container">
<div class="img">
<img src="images/icon-study.svg" alt="">
</div>
<div class="study">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Study
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 7hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
13hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 19hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Exercise -->
<div class="exercise-container">
<div class="img">
<img src="images/icon-exercise.svg" alt="">
</div>
<div class="exercise">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Exercise
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 5hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
11hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 18hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Social -->
<div class="social-container">
<div class="img">
<img src="images/icon-social.svg" alt="">
</div>
<div class="social">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Social
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 3hrs
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
5hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 10hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
21hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 23hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Self-care -->
<div class="self-care-container">
<div class="img">
<img src="images/icon-self-care.svg" alt="">
</div>
<div class="self-care">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Self Care
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
2hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 2hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
7hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 11hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap");
:root {
/*## Colors*/
/*### Primary*/
--Blue: hsl(246, 80%, 60%);
--Light-red-1: hsl(15, 100%, 70%);
/*(work)*/
--Soft-blue: hsl(195, 74%, 62%);
/*(play)*/
--Light-red: hsl(348, 100%, 68%);
/*(study)*/
--Lime-green: hsl(145, 58%, 55%);
/*(exercise)*/
--Violet: hsl(264, 64%, 52%);
/*(social)*/
--Soft-orange: hsl(43, 84%, 65%);
/*(self care)*/
/*### Neutral*/
--Very-dark-blue: hsl(226, 43%, 10%);
--Dark-blue: hsl(235, 46%, 20%);
--Desaturated-blue: hsl(235, 45%, 61%);
--Pale-Blue: hsl(236, 100%, 87%);
}
body {
font-family: "Rubik", sans-serif;
}
body .container {
background: red;
width: 80%;
height: 60%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 10px;
grid-template-areas: "report work play study" "report exercise social selfcare";
}
body .container .report {
grid-area: report;
background-color: violet;
height: 56.5%;
}
body .container .work-container {
grid-area: work;
width: 100%;
height: 50%;
background-color: violet;
}
body .container .study-container {
grid-area: study;
}
body .container .exercise-container {
grid-area: exercise;
}
body .container .social-container {
grid-area: social;
}
body .container .selfcare-container {
grid-area: selfcare;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/stylesDesk.css">
<link rel="stylesheet" href="normalize.css">
<script src="https://kit.fontawesome.com/7461cf9184.js" crossorigin="anonymous"></script>
<title>Frontend Mentor | Time tracking dashboard</title>
<!-- Feel free to remove these styles or customise in your own stylesheet -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="container">
<!-- Report info container -->
<div class="report">
<div class="info">
<img src="images/image-jeremy.png" alt="">
<div class="person-info">
<h2 class="title">
Report for
</h2>
<h3 class="name">
Jeremy Robson
</h3>
</div>
</div>
<div class="footer">
<p>Daily</p>
<p>Weekly</p>
<p>Monthly</p>
</div>
</div>
<!-- Work category container -->
<div class="work-container">
<div class="img">
<img src="images/icon-work.svg" alt="">
</div>
<div class="work">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Work
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
5hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 7hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
32hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 36hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
103hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 128hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Play -->
<div class="play-container">
<div class="img">
<img src="images/icon-play.svg" alt="">
</div>
<div class="play">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Play
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 2hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
10hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 8hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
23hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 29hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Study -->
<div class="study-container">
<div class="img">
<img src="images/icon-study.svg" alt="">
</div>
<div class="study">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Study
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 7hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
13hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 19hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Exercise -->
<div class="exercise-container">
<div class="img">
<img src="images/icon-exercise.svg" alt="">
</div>
<div class="exercise">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Exercise
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 5hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
11hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 18hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Social -->
<div class="social-container">
<div class="img">
<img src="images/icon-social.svg" alt="">
</div>
<div class="social">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Social
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 3hrs
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
5hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 10hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
21hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 23hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Self-care -->
<div class="self-care-container">
<div class="img">
<img src="images/icon-self-care.svg" alt="">
</div>
<div class="self-care">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Self Care
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
2hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 2hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
7hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 11hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>所以我试图制作一个有 2 行 4 列的网格，但是当我做第一行的每一列时，我的“网格容器”的高度甚至更多，第二个是在下面创建的，因为容器是双倍的的高度。所以我想知道我的代码有什么问题。如果你能帮助我，我将不胜感激。谢谢你。
这里我有 .scss 文件：
body {
font-family: 'Rubik', sans-serif;
.container {
background: red;
width: 80%;
height: 60%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
//Grid
display: grid;
grid-template-rows: repeat(2,1fr);
grid-template-columns: repeat(4,1fr);
gap: 10px;
grid-template-areas:
"report work play study"
"report exercise social selfcare";
report{
grid-area:report;
}
work-container{
grid-area:work;
}
play-container{
grid-area:play;
}
study-container{
grid-area:study;
}
exercise-container{
grid-area:exercise;
}
social-container{
grid-area:social;
}
selfcare-container{
grid-area:selfcare;
}
}
解决方案
希望下面的回答对你有帮助
- 我只处理过你的 CSS 代码，我没有改变你的 html 结构。
- 对您来说更适合 .container 元素的理想高度。
每个网格的目标内容溢出（每个 .container > div 元素）
在您的样式中添加了以下附加 CSS 代码
body .container > div {
overflow-y: auto;
}
请检查以下代码片段
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap");
:root {
/*## Colors*/
/*### Primary*/
--Blue: hsl(246, 80%, 60%);
--Light-red-1: hsl(15, 100%, 70%);
/*(work)*/
--Soft-blue: hsl(195, 74%, 62%);
/*(play)*/
--Light-red: hsl(348, 100%, 68%);
/*(study)*/
--Lime-green: hsl(145, 58%, 55%);
/*(exercise)*/
--Violet: hsl(264, 64%, 52%);
/*(social)*/
--Soft-orange: hsl(43, 84%, 65%);
/*(self care)*/
/*### Neutral*/
--Very-dark-blue: hsl(226, 43%, 10%);
--Dark-blue: hsl(235, 46%, 20%);
--Desaturated-blue: hsl(235, 45%, 61%);
--Pale-Blue: hsl(236, 100%, 87%);
}
body {
font-family: "Rubik", sans-serif;
}
body .container {
background: red;
width: 80%;
height: 60%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 10px;
grid-template-areas: "report work play study" "report exercise social selfcare";
}
body .container > div {
overflow-y: auto;
}
body .container .report {
grid-area: report;
background-color: violet;
height: 56.5%;
}
body .container .work-container {
grid-area: work;
width: 100%;
height: 50%;
background-color: violet;
}
body .container .study-container {
grid-area: study;
}
body .container .exercise-container {
grid-area: exercise;
}
body .container .social-container {
grid-area: social;
}
body .container .selfcare-container {
grid-area: selfcare;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/stylesDesk.css">
<link rel="stylesheet" href="normalize.css">
<script src="https://kit.fontawesome.com/7461cf9184.js" crossorigin="anonymous"></script>
<title>Frontend Mentor | Time tracking dashboard</title>
<!-- Feel free to remove these styles or customise in your own stylesheet -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="container">
<!-- Report info container -->
<div class="report">
<div class="info">
<img src="images/image-jeremy.png" alt="">
<div class="person-info">
<h2 class="title">
Report for
</h2>
<h3 class="name">
Jeremy Robson
</h3>
</div>
</div>
<div class="footer">
<p>Daily</p>
<p>Weekly</p>
<p>Monthly</p>
</div>
</div>
<!-- Work category container -->
<div class="work-container">
<div class="img">
<img src="images/icon-work.svg" alt="">
</div>
<div class="work">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Work
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
5hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 7hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
32hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 36hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
103hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 128hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Play -->
<div class="play-container">
<div class="img">
<img src="images/icon-play.svg" alt="">
</div>
<div class="play">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Play
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 2hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
10hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 8hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
23hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 29hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Study -->
<div class="study-container">
<div class="img">
<img src="images/icon-study.svg" alt="">
</div>
<div class="study">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Study
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 7hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
13hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 19hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Exercise -->
<div class="exercise-container">
<div class="img">
<img src="images/icon-exercise.svg" alt="">
</div>
<div class="exercise">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Exercise
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 5hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
11hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 18hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Social -->
<div class="social-container">
<div class="img">
<img src="images/icon-social.svg" alt="">
</div>
<div class="social">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Social
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 3hrs
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
5hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 10hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
21hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 23hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Self-care -->
<div class="self-care-container">
<div class="img">
<img src="images/icon-self-care.svg" alt="">
</div>
<div class="self-care">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Self Care
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
2hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 2hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
7hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 11hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>网格容器（.container 元素）的目标内容溢出
在您的样式中添加了以下附加 CSS 代码
body .container {
overflow-y: auto;
}
请检查以下代码片段
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap");
:root {
/*## Colors*/
/*### Primary*/
--Blue: hsl(246, 80%, 60%);
--Light-red-1: hsl(15, 100%, 70%);
/*(work)*/
--Soft-blue: hsl(195, 74%, 62%);
/*(play)*/
--Light-red: hsl(348, 100%, 68%);
/*(study)*/
--Lime-green: hsl(145, 58%, 55%);
/*(exercise)*/
--Violet: hsl(264, 64%, 52%);
/*(social)*/
--Soft-orange: hsl(43, 84%, 65%);
/*(self care)*/
/*### Neutral*/
--Very-dark-blue: hsl(226, 43%, 10%);
--Dark-blue: hsl(235, 46%, 20%);
--Desaturated-blue: hsl(235, 45%, 61%);
--Pale-Blue: hsl(236, 100%, 87%);
}
body {
font-family: "Rubik", sans-serif;
}
body .container {
background: red;
width: 80%;
height: 60%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(4, 1fr);
gap: 10px;
grid-template-areas: "report work play study" "report exercise social selfcare";
overflow-y: auto;
}
body .container .report {
grid-area: report;
background-color: violet;
height: 56.5%;
}
body .container .work-container {
grid-area: work;
width: 100%;
height: 50%;
background-color: violet;
}
body .container .study-container {
grid-area: study;
}
body .container .exercise-container {
grid-area: exercise;
}
body .container .social-container {
grid-area: social;
}
body .container .selfcare-container {
grid-area: selfcare;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/stylesDesk.css">
<link rel="stylesheet" href="normalize.css">
<script src="https://kit.fontawesome.com/7461cf9184.js" crossorigin="anonymous"></script>
<title>Frontend Mentor | Time tracking dashboard</title>
<!-- Feel free to remove these styles or customise in your own stylesheet -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="container">
<!-- Report info container -->
<div class="report">
<div class="info">
<img src="images/image-jeremy.png" alt="">
<div class="person-info">
<h2 class="title">
Report for
</h2>
<h3 class="name">
Jeremy Robson
</h3>
</div>
</div>
<div class="footer">
<p>Daily</p>
<p>Weekly</p>
<p>Monthly</p>
</div>
</div>
<!-- Work category container -->
<div class="work-container">
<div class="img">
<img src="images/icon-work.svg" alt="">
</div>
<div class="work">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Work
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
5hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 7hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
32hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 36hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
103hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 128hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Play -->
<div class="play-container">
<div class="img">
<img src="images/icon-play.svg" alt="">
</div>
<div class="play">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Play
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 2hrs
<!-- daily -->
</p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
10hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 8hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
23hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 29hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Study -->
<div class="study-container">
<div class="img">
<img src="images/icon-study.svg" alt="">
</div>
<div class="study">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Study
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 7hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
13hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 19hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Exercise -->
<div class="exercise-container">
<div class="img">
<img src="images/icon-exercise.svg" alt="">
</div>
<div class="exercise">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Exercise
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
4hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 5hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
11hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 18hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Social -->
<div class="social-container">
<div class="img">
<img src="images/icon-social.svg" alt="">
</div>
<div class="social">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Social
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
1hr
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 3hrs
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
5hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 10hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
21hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 23hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
<!-- Self-care -->
<div class="self-care-container">
<div class="img">
<img src="images/icon-self-care.svg" alt="">
</div>
<div class="self-care">
<i class="fas fa-ellipsis-h"></i>
<h2 class="category">
Self Care
</h2>
<!-- Daily section -->
<section class="category-daily">
<h3 class="hours-daily">
0hrs
<!-- daily -->
</h3>
<p class="hours-daily-previous">
Previous - 1hr
<!-- daily -->></p>
</section>
<!-- Weekly section -->
<section class="category-weekly">
<h3 class="hours-weekly">
2hrs
<!-- weekly -->
</h3>
<p class="hours-weekly-previous">
Previous - 2hrs
<!-- weekly -->
</p>
</section>
<!-- Monthly section -->
<section class="category-monthly">
<h3 class="hours-monthly">
7hrs
<!-- monthly -->
</h3>
<p class="hours-monthly-previous">
Previous - 11hrs
<!-- monthly -->
</p>
</section>
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>推荐阅读
- c# - 获取用户 SID 抛出 IdentityNotMappedException
- vue.js - Jest / Vue Test Utils - Axios mock 仅适用于测试文件本身
- python - 为什么 writerow 不分离这些列表元素？
- ios - 如何使用 react-native-maps 在 iOS 中禁用用户位置的点击和工具提示
- jquery - 选择具有最大数字的元素
- twig - Craft 3 entry.author.getPhoto() 在模板上为空，用户在详细信息部分上传了一张照片，我如何让照片显示？
- ruby - badRequest：无效请求[0]：未设置请求。（谷歌::Apis::ClientError）
- javascript - React Jsx 和 JS 文件条件
- firebase - Flutter 和 Firebase：在小部件中显示来自 cloud_firestore 的存储信息
- xamarin - Xamarin Foms SqlCommand 错误 Tcp 提供程序 35