当前位置： 文江博客话题详情

为什么高度：fit-content;; quot;'不适合其任何内容吗？

发布于 2025-01-21 06:23:53 字数 7910 浏览 0 评论 0原文

有一个DIV涵盖我项目中我页面的一部分。我想设置其高度以覆盖其内部的所有对象，因此我将Fit-Content作为其高度属性。但是，由于某种原因，它的高度为0，尽管其中有一个标题和网格。我试图更改为不同的位置，并设置最大包含，什么也没有改变。我也试图改变几乎没有头的H1中的线条高度，但似乎没有任何作用。网格容器类似，如果您放下填充物，则高度并不能完全覆盖最后一个网格项目。这是我正在努力的片段的代码：

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>

原文

There is a div that covers one part of my page in my project. I wanna set its height to cover all of the objects that are located inside of it, so i put fit-content as its height property. But, for some reason its height is 0, although there is a header and grid in it. I tried to change to different positions and set max-content, nothing changed. Also I tried to change line-height in almost-header h1, but it seems like nothing actually works. Something similar is with grid-container, that's height is not covering the last grid-item completely, if you drop the padding. This is the code for the snippet I'm struggling with:

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>

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

扫码二维码加入Web技术交流群

发布评论

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

评论（1）

温柔戏命师 2025-01-28 06:23:53

这是一些重构。更少的CSS总是更多的

Here is some refactoring. Less CSS is always more ????

Your gap of 1% was causing the height issue, I don't know grid well enough to explain why.

* {
  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>

回复 原文
~没有更多了~

关于作者

蝶舞

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

饮湿

文章 0 评论 0

明月

文章 0 评论 0

02

文章 0 评论 0

hs1283

文章 0 评论 0

风向决定发型

文章 0 评论 0

落花浅忆

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文