为什么 "height: fit-content;" 不适合它的任何内容？
Why "height: fit-content;" does not fit any of its contents?
有一个 div 覆盖了我项目中页面的一部分。我想设置它的高度来覆盖它里面的所有 objects，所以我把 fit-content 作为它的高度 属性。但是，由于某种原因，它的高度为 0，尽管其中有一个 header 和网格。我试着换了不同的位置，设置了max-content，没有任何改变。我也尝试在 almost-header h1 中更改 line-height，但似乎没有任何实际效果。与 grid-container 类似的是，如果您放下填充，则高度不会完全覆盖最后一个 grid-item。这是我正在努力处理的片段的代码：
body{
font: normal 100% "Sathu", sans-serif;
background: #181818;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.secondary{
position: absolute;
top: 0;
left: 0;
height: fit-content;
width: 100%;
padding: 0;
margin: 0;
background-color: #FFFFFF;
}
.almost-header{
position: absolute;
background-color: #181818;
height: 20%;
width: 100%;
left: 0;
top: 0;
right: 0;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.almost-header h1{
position: absolute;
left: 5%;
margin: 0;
padding: 0;
font-size: 4em; /* 64px/16px*/
line-height: 1;
/*width: fit-content;*/
/*max-width: 60%;*/
color: #FFFFFF;
width: 90%;
border-bottom: #FFFFFF 1px solid;
}
/*#break-line{*/
/* position: absolute;*/
/* width: calc(100% - 2*70px);*/
/* height: 5px;*/
/* left: 70px;*/
/* top: 9vh;*/
/* background: #FFFFFF;*/
/*}*/
.grid-container{
box-sizing: border-box;
position: absolute;
padding-right: 5%;
padding-left: 5%;
padding-bottom: 15%;
padding-top: 0%;
display: grid;
column-gap: 1%;
row-gap: 1%;
width: 100%;
height: fit-content;
margin: 0;
top: 20%;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
border-bottom: white 1px solid;
}
.grid-item{
width: 100%;
height: 100%;
transition: .5s;
}
.grid-item:hover{
box-shadow: grey 0 5px 8px, grey 0 -5px 8px, grey 5px 0 8px, grey -5px 0 8px;
}
.grid-item-image{
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
.grid-item-image img{
object-fit: cover;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
flex-shrink: 0;
}
.grid-item-footer{
box-sizing: border-box;
padding: 5px;
top: 0;
margin: 0;
height: 15%;
background-color: #E6E6E6;
}
.grid-item-footer p{
color: #333333;
line-height: 1;
}
.footer-city{
margin: 0;
margin-bottom: 10px;
font-style: normal;
font-weight: 800;
font-size: 2em;
line-height: 38px;
color: #333333;
/*margin-bottom: 5px;*/
}
.footer-author-date{
margin: 0;
font-family: 'Barlow', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 1.125em;
line-height: 22px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href= "styles.css">
</head>
<body>
<div class="secondary">
<div class="almost-header">
<h1 id="save-cities">
Check this out:
</h1>
</div>
<div class="grid-container">
<div class="grid-item" id="grid-item0">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item1">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item2">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item3">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item4">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item5">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item6">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item7">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
</div>
</div>
</body>
</html>
这里是一些重构。少 CSS 总是多
你的 1% 的差距导致了高度问题，我不太了解网格来解释原因。
* {
box-sizing: border-box;
}
body {
background: #181818;
}
header {
background-color: #181818;
min-height: 20%;
display: grid;
place-content: center;
}
h1 {
font-size: 4em;
margin: 0;
color: white;
border-bottom: white 1px solid;
}
main {
padding: 5%;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
border-bottom: white 1px solid;
}
.grid-item:hover {
box-shadow: grey 0 5px 8px, grey 0 -5px 8px, grey 5px 0 8px, grey -5px 0 8px;
}
.grid-item img {
display: block;
width: 100%;
}
.grid-item footer {
padding: 5px;
color: #333333;
background-color: #E6E6E6;
}
.footer-city {
margin-bottom: .6em;
font-weight: 800;
font-size: 2em;
}
.footer-author-date {
font-weight: 500;
font-size: 1.125em;
}
<header>
<h1 id="save-cities">
Check this out:
</h1>
</header>
<main>
<article class="grid-item" id="grid-item0">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item1">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item2">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item3">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item4">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item5">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item6">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item7">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
</main>
有一个 div 覆盖了我项目中页面的一部分。我想设置它的高度来覆盖它里面的所有 objects，所以我把 fit-content 作为它的高度 属性。但是，由于某种原因，它的高度为 0，尽管其中有一个 header 和网格。我试着换了不同的位置，设置了max-content，没有任何改变。我也尝试在 almost-header h1 中更改 line-height，但似乎没有任何实际效果。与 grid-container 类似的是，如果您放下填充，则高度不会完全覆盖最后一个 grid-item。这是我正在努力处理的片段的代码：
body{
font: normal 100% "Sathu", sans-serif;
background: #181818;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.secondary{
position: absolute;
top: 0;
left: 0;
height: fit-content;
width: 100%;
padding: 0;
margin: 0;
background-color: #FFFFFF;
}
.almost-header{
position: absolute;
background-color: #181818;
height: 20%;
width: 100%;
left: 0;
top: 0;
right: 0;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.almost-header h1{
position: absolute;
left: 5%;
margin: 0;
padding: 0;
font-size: 4em; /* 64px/16px*/
line-height: 1;
/*width: fit-content;*/
/*max-width: 60%;*/
color: #FFFFFF;
width: 90%;
border-bottom: #FFFFFF 1px solid;
}
/*#break-line{*/
/* position: absolute;*/
/* width: calc(100% - 2*70px);*/
/* height: 5px;*/
/* left: 70px;*/
/* top: 9vh;*/
/* background: #FFFFFF;*/
/*}*/
.grid-container{
box-sizing: border-box;
position: absolute;
padding-right: 5%;
padding-left: 5%;
padding-bottom: 15%;
padding-top: 0%;
display: grid;
column-gap: 1%;
row-gap: 1%;
width: 100%;
height: fit-content;
margin: 0;
top: 20%;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
border-bottom: white 1px solid;
}
.grid-item{
width: 100%;
height: 100%;
transition: .5s;
}
.grid-item:hover{
box-shadow: grey 0 5px 8px, grey 0 -5px 8px, grey 5px 0 8px, grey -5px 0 8px;
}
.grid-item-image{
width: 100%;
height: 85%;
display: flex;
justify-content: center;
align-items: center;
}
.grid-item-image img{
object-fit: cover;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
flex-shrink: 0;
}
.grid-item-footer{
box-sizing: border-box;
padding: 5px;
top: 0;
margin: 0;
height: 15%;
background-color: #E6E6E6;
}
.grid-item-footer p{
color: #333333;
line-height: 1;
}
.footer-city{
margin: 0;
margin-bottom: 10px;
font-style: normal;
font-weight: 800;
font-size: 2em;
line-height: 38px;
color: #333333;
/*margin-bottom: 5px;*/
}
.footer-author-date{
margin: 0;
font-family: 'Barlow', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 1.125em;
line-height: 22px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href= "styles.css">
</head>
<body>
<div class="secondary">
<div class="almost-header">
<h1 id="save-cities">
Check this out:
</h1>
</div>
<div class="grid-container">
<div class="grid-item" id="grid-item0">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item1">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item2">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item3">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item4">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item5">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item6">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
<div class="grid-item" id="grid-item7">
<div class="grid-item-image">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
</div>
<div class="grid-item-footer">
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</div>
</div>
</div>
</div>
</body>
</html>
这里是一些重构。少 CSS 总是多
你的 1% 的差距导致了高度问题，我不太了解网格来解释原因。
* {
box-sizing: border-box;
}
body {
background: #181818;
}
header {
background-color: #181818;
min-height: 20%;
display: grid;
place-content: center;
}
h1 {
font-size: 4em;
margin: 0;
color: white;
border-bottom: white 1px solid;
}
main {
padding: 5%;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
border-bottom: white 1px solid;
}
.grid-item:hover {
box-shadow: grey 0 5px 8px, grey 0 -5px 8px, grey 5px 0 8px, grey -5px 0 8px;
}
.grid-item img {
display: block;
width: 100%;
}
.grid-item footer {
padding: 5px;
color: #333333;
background-color: #E6E6E6;
}
.footer-city {
margin-bottom: .6em;
font-weight: 800;
font-size: 2em;
}
.footer-author-date {
font-weight: 500;
font-size: 1.125em;
}
<header>
<h1 id="save-cities">
Check this out:
</h1>
</header>
<main>
<article class="grid-item" id="grid-item0">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item1">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item2">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item3">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item4">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item5">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item6">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
<article class="grid-item" id="grid-item7">
<img src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3540&q=80">
<footer>
<p class="footer-city">Something</p>
<p class="footer-author-date">01.01.1971</p>
</footer>
</article>
</main>