每当我缩小浏览器大小时，尽管存在网格列，我的所有div也会重新调整大小，如您所见，应该像普通div auto re-sizing一样到达页面末尾，我使用了CSS网格一切正常，除了这个问题，因为它会导致页面的某些部分变黑，当您访问网站（www.thegreatmurshed.co.uk）时，我会明白我的意思，它应该像这样{{3 }}
以下是该页面的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>
答案 0 :(得分：0)
您没有设置.main div的大小设置。它正在调整大小，因为所有内容都包含在动态大小的div中。尝试为position:relative的CSS添加.main以及height和width属性，这可能会解决您的问题。