每当我缩小我的浏览器大小时，我的所有div都会调整大小，尽管网格列在那里，你可以看到它应该到达页面的末端，就像正常的div auto re-sizing我使用CSS网格，一切正常，除了这个问题，因为它会导致页面的一部分变黑，你会看到我访问网站时的意思（www.thegreatmurshed.co.uk）它应该看起来像这个like this
以下是我的页面的HTML和CSS。
/*
font-family: 'Anton', sans-serif; -----------------BOLD
font-family: 'Fjalla One', sans-serif; ------------REGULAR
*/
*{
margin: 0;
}
body{
background: black;
}
.logo{
font-size: 40px;
font-family: 'Anton', sans-serif;
color: #ffc800;
line-height: 100px;
}
.header {
grid-area: hd;
height: auto;
}
.header{
display: grid;
grid-template-columns: 700px 250px 250px 250px 250px auto;
grid-template-rows: 95px;
grid-template-areas: "hd hd hd hd hd";
font-family: 'Anton', sans-serif;;
font-size: 30px;
margin-bottom: 20px;
border-bottom: 2px solid #ffc800;
}
.header{
background: black;
}
.header a{
color: #ffc800;
text-decoration: none;
line-height: 100px;
}
.hme{
grid-column-start: 2;
}
.vids{
grid-column-start: 3;
}
.header a:hover {
-webkit-transition: all ease-in-out;
-moz-transition: all ease-in-out;
-ms-transition: all ease-in-out;
-o-transition: all ease-in-out;
transition: all ease-in-out;
color: transparent;
text-shadow: 0 0 1px rgba(255,255,255,0.9), 2px 0px 0px #00FFD7, -1px 0px 0px #FF0000;
padding: 0 0 0 -1px;
}
/*----------------------------------------------------------------*/
.main{
grid-area: mn;
}
.main{
display: grid;
grid-template-columns: 250px 500px 1fr 1fr;
grid-template-rows: 400px 400px;
grid-template-areas: "mn mn mn mn mn";
color: white;
margin-bottom: 50px;
}
video{
background: url(./clientback3);
overflow: auto;
}
.others{
color: #ffc800;
font-family: 'Anton', sans-serif;
font-size: 100px;
line-height: 700px;
z-index: 2;
grid-column-start: 2;
grid-column-end: 4;
min-width: 646.5px;
}
.artnam{
color: #ffc800;
font-family: 'Anton', sans-serif;
font-size: 50px;
grid-column-start: 2;
grid-column-end: 4;
z-index: 1;
min-width: 615.5px;
}
.mnvid:hover{
autoplay: 1;
}
/*-------------------------------------------------------------*/
.intro{
grid-area: int;
}
.intro{
display: grid;
grid-template-columns: 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px;
grid-template-rows: 20px 60px 50px 250px 80px;
color: #ffc800;
background: url(./clientback3.jpg);
}
.vpap{
grid-column-start: 1;
grid-column-end: 17;
grid-row-start: 2;
font-family: 'Anton', sans-serif;
font-size: 50px;
text-align: center;
text-decoration-style: underline;
padding-bottom: 20px;
}
.abtinf{
font-family: 'Fjalla One', sans-serif;
grid-row-start: 4;
grid-column-start: 2;
grid-column-end: 15;
font-size: 25px;
}
/*-----------------------------------------------------------*/
.recproc{
grid-area: rcp;
}
.recproc{
display: grid;
grid-template-columns: 250px 360px 360px 360px 360px;
grid-column-gap: 50px;
grid-template-rows: auto auto auto;
color: #ffc800;
font-family: 'Anton', sans-serif;
font-size: 25px;
background-image: url(projback.jpg);
}
.projtitle{
grid-column-start: 3;
text-align: center;
margin-bottom: 20px;
color: #ffc800;
font-family: 'Anton', sans-serif;
}
.firstvid{
grid-column-start: 2;
margin-bottom: 50px;
}
.secvid{
grid-row-start: 2;
grid-column-start: 3;
margin-bottom: 50px;
}
.thrdvid{
grid-row-start: 2;
grid-column-start: 4;
margin-bottom: 50px;
}
.frthvid{
grid-row-start: 3;
grid-column-start: 2;
margin-bottom: 50px;
}
.fthvid{
grid-row-start: 3;
grid-column-start: 3;
margin-bottom: 50px;
}
.sthvid{
grid-row-start: 3;
grid-column-start: 4;
margin-bottom: 50px;
}
/*---------------------------------------------*/
.wyus{
display: grid;
grid-template-columns: 300px 150px 250px 250px 250px 250px;
grid-template-rows: auto auto auto auto 75px;
background: url(./clientback3.jpg);
font-family: 'Anton', sans-serif;
color: #ffc800;
}
.whyustit{
grid-column-start: 2;
padding-top: 50px;
font-size: 50px;
padding-bottom: 25px;
}
.whyusinfop1{
grid-row-start: 2;
grid-column-start: 2;
grid-column-end: 6;
font-size: 25px;
padding-bottom: 20px;
font-family: 'Fjalla One', sans-serif;
}
.whyusinfop2{
grid-row-start: 3;
grid-column-start: 2;
grid-column-end: 6;
font-size: 25px;
padding-bottom: 35px;
font-family: 'Fjalla One', sans-serif;
}
.butcont{
grid-row-start: 4;
grid-column-start: 2;
font-size: 25px;
color: black;
text-decoration: none;
border: 2px #2a2a2a;
background: #2a2a2a;
color: white;
border-radius: 6px;
color: #ffc800;
}
.butcont:hover{
-webkit-transition: all ease-in-out;
-moz-transition: all ease-in-out;
-ms-transition: all ease-in-out;
-o-transition: all ease-in-out;
transition: all ease-in-out;
color: transparent;
text-shadow: 0 0 1px rgba(255,255,255,0.9), 2px 0px 0px #00FFD7, -1px 0px 0px #FF0000;
padding: 0 0 0 -1px;
border: 2px #ffc800;
background: #ffc800;
}
/*------------------------------------------------*/
.footer{
display: grid;
grid-template-columns: 250px 75px 250px 250px 250px 250px auto auto 1fr;
grid-template-rows: 100px 60px 100px;
background: black;
color: #ffc800;
font-family: 'Anton', sans-serif;
border-top: 2px solid #ffc800;
}
.follow{
grid-column-start: 2;
margin-top: 25px;
}
.instalogo{
grid-column-start: 2;
grid-row-start: 2;
height: auto;
width: 50px;
}
.insat{
grid-row-start: 2;
grid-column-start: 3;
font-size: 25px;
margin-top: 15px;
font-family: 'Fjalla One', sans-serif;
}
.devby{
grid-column-start: 7;
margin-top: 25px;
}
.jbdevlgo{
height: auto;
width: 500px;
grid-column-start: 7;
grid-column-end: 9;
grid-row-start: 2;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Murshed</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Fjalla+One" rel="stylesheet">
</head>
<body>
<div class="header">
<h1 class="logo">THEGREATMURSHED</h1>
<a href="./home.html" class="hme">Home</a>
<a href="./videos.html" class="vids">Videos</a>
<a href="./enquiry.html" class="enq">Enquiries</a>
<a href="./socials.html" class="schls">Socials</a>
<a href="./Photoshoots.html" class="phtos">Photoshoots</a>
</div>
<div class="main">
<video width="auto" height="800" controls="1" loop="5" autoplay="1" id="video1" allow="autoplay" muted="1">
<source src="./covervid.mp4" type="video/mp4">
</video>
<h1 class="others">GET RIGHT REMIX</h1>
<p class="artnam">Dockem & Malone ft. Ayo Beatz</p>
</div>
<div class="intro">
<h1 class="vpap">ABOUT US</h1>
<p class="abtinf">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit obcaecati quae modi amet at aperiam rerum facilis error impedit culpa. Magnam earum odio quia maxime minima, excepturi, at omnis dolorum delectus consectetur atque? Exercitationem ipsam possimus cupiditate aspernatur iure, dignissimos aperiam adipisci. Sapiente inventore quo dolorem labore quaerat ab quasi, at vel recusandae blanditiis eveniet iusto animi rem quia provident unde tempora sequi mollitia accusamus, sit vitae fuga et expedita. Non nulla pariatur numquam distinctio harum maxime doloremque est aspernatur suscipit ex, esse voluptatem. Laudantium explicabo incidunt ab, eum aperiam tenetur consequuntur odio, necessitatibus consequatur reprehenderit porro! Eius odit, possimus earum quasi architecto atque corrupti consequuntur sequi, nobis iste tempore ut rerum! Inventore adipisci, ex perspiciatis laudantium dicta natus rem eligendi, quae earum incidunt voluptates sapiente! Ipsa similique nobis unde illum sed esse earum in doloremque tenetur, fugiat fuga, facilis dolor quis accusamus, autem quasi eveniet incidunt natus consectetur ipsam.</p>
</div>
</script>
<div class="recproc">
<h1 class="projtitle">Projects</h1>
<iframe width="360" height="315" src="https://www.youtube.com/embed/Ztt1zS1EuIE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="firstvid">
</iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/EoeEmNrYJgo?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="secvid"></iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/iAMq_sXkXxA?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="thrdvid"></iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/Jb6huXOpkyc?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="frthvid"></iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/7ha6xYSOHeQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="fthvid"></iframe>
<iframe width="360" height="315" src="https://www.youtube.com/embed/Atr-sLswEUE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="sthvid"></iframe>
</div>
<div class="wyus">
<h1 class="whyustit">Why Us</h1>
<p class="whyusinfop1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui perferendis aut exercitationem nobis vitae omnis totam eum vero tempore sit quod, vel porro sequi, dignissimos ut quidem maxime nulla. Praesentium placeat velit similique minima nam, quibusdam voluptates at veritatis, aliquam ratione, alias deleniti quaerat. Fuga neque reiciendis ipsa animi, vitae architecto iusto, at facere totam provident in enim aperiam quod.</p>
<p class="whyusinfop2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit reiciendis laboriosam debitis non est culpa sapiente incidunt eligendi consequatur totam exercitationem harum unde minima nesciunt cumque et quod molestias voluptates animi delectus dolores quasi voluptate, blanditiis iste. Fugit omnis, harum?</p>
<a href="./enquiry.html" class="butcont">Contact Us</a>
</div>
<div class="footer">
<h1 class="follow">Follow</h1>
<img src="./instalogo.png" class="instalogo">
<p class="insat">@thegreatmurshed</p>
<h1 class="devby">Developed By</h1>
<img src="./jbdevlogo.png" class="jbdevlgo">
</div>
</body>
</html>你没有设置你的.main div的sizer。它正在调整大小，因为所有内容都包含在动态大小的div中。尝试将position:relative和高度和宽度属性添加到css for .main，它可能会解决您的问题。