html - 我的 div 容器随着浏览器不断缩小

Question

每当我缩小浏览器大小时，尽管存在网格列，我的所有 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>

Answer 1

您没有设置 .main div 的 sizer。它正在调整大小，因为所有内容都包含在一个动态大小的 div 中。尝试将 position:relative 以及高度和宽度属性添加到 .main 的 css 中，它可能会解决您的问题。