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;
}
}
uj5u.com熱心網友回復：
由于內容比可用高度長得多（至少在我能夠擁有的最大視口上），因此如果要將其包含在容器元素中，則必須使其滾動。IE：
.container > div { overflow: scroll; }
否則內容會將區域向下推以確保內容適合。
容器真的沒有太多高度，所以會有很多看起來不太好的滾動，用戶是否很難理解他們必須滾動每個容器才能看到它說的是什么？
就我個人而言，我建議取消非常受限的容器大小并讓內容決定網格區域的高度，這樣用戶最多只能處理一個滾動條 - 但當然我不確切知道您的用例或用戶是誰將會。
這是包含滾動的片段，因此滿足您將所有內容按指定放入容器的要求：
@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";
}
/* ADDED */
body .container>div {
overflow: scroll;
}
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>uj5u.com熱心網友回復：
希望下面的回答對你有幫助
- 我只處理過你的 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344705.html
上一篇：打開模型按鈕也隱藏在模型關閉時