I’m a beginner and I’m trying to make an experimental site for my self, but I’m trying to make the .menu-conatainer 100% the height of .container but it doesn’t work at all.
this is the jsfiddle: https://jsfiddle.net/y1h2ervw/2/
CSS:
.container{
width: 100%;
display: inline-flex;
justify-content: center;
}
.menu-container{
height: 100%;
width: 80%;
display: inline-flex;
justify-content: center;
margin: 0px;
padding: 0px;
}
.Menu{
width: 75%;
display: inline-flex;
justify-content: space-between;
font-family: Montserrat;
background-color: rgba(82, 121, 111, 0.5);
}
.site-title{
padding-left: 15px;
cursor: pointer;
}
.nav-items{
padding: 0;
margin-top: 5px;
display: flex;
font-size: 1.2rem;
}
.nav-items > *{
padding: 0px;
font-weight: 600;
color: rgba(38, 70, 83, 1);
margin: 15px;
}
.nav-items >*:hover{
color: white;
cursor: pointer;
}
@media (max-width: 685px){
.container{
display: inline-flex;
height: fit-content;
width: 30%;
flex-direction: column;
font-size: 0.8rem;
}
.Menu{
border-radius: 2%;
display: inline-flex;
flex-direction: column;
}
.site-title{
text-align: center;
padding: 0;
}
.nav-items{
text-align: center;
margin: 5px 2px 5px 2px;
display: inline-flex;
flex-direction: column;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio</title>
<link type="text/css" rel="stylesheet" href="style.css" >
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
</head>
<body style="background-color: #ffe8d6;">
<div class="container">
<div class="menu-container">
<div class="Menu">
<div class="site-title"><h2>Portofolio</h2></div>
<div class="nav-items">
<div>First Year</div>
<div>Second Year</div>
<div>Contact</div>
<div>More</div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried to add height: 100%; to the child flex box (menu-container) expecting it would be 100% the size of the parent flex box (container) but it didn’t work.
2
Answers
Defina a propriedade
position: relative;no elemento pai .container, que estabelece um contexto de posicionamento para os elementos filhos absolutos. E em seguida, apliqueposition: absolute;no .menu-container, e usandotop: 0; bottom: 0; left: 0; right: 0;para definir o tamanho do .menu-container para ocupar toda a altura e largura do .container.try this on .container : height: 100vh;