Я пробовал так много итераций, но я не знаю, что делать.
Когда я изменяю top: 0px в kontener и добавляю маржу: 42px в kontener_auto_2, нижний сайт в порядке, но верхняя прокрутка и kontener под nav .
Эффект, которого я хочу достичь, это прокрутка под #nav, но вы видите все прокрутки.
html {
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
height: 100%;
margin: 0;
padding: 0px;
overflow: hidden;
}
#nav {
position: fixed;
top: 0px;
left: 0px;
height: 40px;
width: 100%;
background-color: #000000;
z-index: 99;
border-bottom: 2px solid #4d93d1;
-webkit-box-shadow: -2px 10px 11px -9px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -2px 10px 11px -9px rgba(0, 0, 0, 0.75);
box-shadow: -2px 10px 11px -9px rgba(0, 0, 0, 0.75);
}
#kontener {
position: absolute;
top: 42px;
left: 0px;
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
background-color: #1F1F1F;
}
#kontener_auto {
padding: 0px;
height: 100%;
overflow: auto;
}
#kontener_auto_2 {
margin-left: 20px;
margin-top:20px;
margin-bottom: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(182px, 1fr));
grid-auto-rows: auto;
grid-gap: 10px;
margin-right: 20px;
}
#tumble {
float: left;
height: 180px;
width: 250px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="temp.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="nav"></div>
<div id="kontener">
<div id="kontener_auto">
<div id="kontener_auto_2">
<div id="tumble"></div>
<div id="tumble"></div>
<div id="tumble"></div>
<div id="tumble"></div>
<div id="tumble"></div>
<div id="tumble"></div>
<div id="tumble"></div>
</div>
</div>
</div>
</body>
</html>
Мне действительно нужна помощь, но я не знаю, как добиться эффекта моей мечты.