In my project, I have a div that covers a portion of the page. I want this div to adjust its height to encompass all the objects inside it, so I set the height property to fit-content. However, despite having a header and grid within the div, its height remains at 0. I've tried changing positions, setting max-content, and adjusting line-height in the almost-header h1 element, but nothing seems to work. The same issue applies to the grid-container, where the height does not fully cover the last grid-item when padding is removed. Here is the code 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;
}
.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">
...