我有一个CSS Grid布局，其中顶部行的大小随着视图端口大小的减小而增加，这不是我想要的。
我不知道我必须进行哪些更改，以使第一行的大小不会增加。
/* change border colour to suit your needs */
html{
background-color:azure;
}
.sideNav{
background: #eee;
text-decoration: none;
font-size: 1.25vw;
color:blueviolet;
margin:10px 5px 10px 0px;
margin-top: 200px;
position:absolute;
}
table{
background-color: #eee;
width:100%;
border-spacing:2px;
}
th{
background:azure;
padding:5px;
}
td{
border-bottom: 1px solid white;
padding:5px;
font-size=1vw;
}
/*specific selectors*/
th.No {
text-align:center;
}
td.No {
text-align:center;
}
.heading1{
font-family:sans-serif;
font-size:2vw;
text-align:center;
background-color:blue;
color:white;
border-radius:2px;
}
.heading2{
font-family:sans-serif;
font-size:20px;
text-align:left;
margin-top:10px;
color:black;
border-radius:5px;
}
body{
background-color:white;
}
.container{
display:grid;
grid-template-columns:repeat(6, 1fr);
grid-template-rows:repeat(8, 1fr);
grid-template-areas:
"top top top top top top "
"Lbar main main main main Rbar"
"Lbar main main main main Rbar"
"Lbar main main main main Rbar"
"Lbar main main main main Rbar"
"Lbar main main main main Rbar"
"Lbar main main main main Rbar"
"foot foot foot foot foot foot"
}
.title{
grid-area:top;
}
img{
width:100%;
}
.leftBar{
grid-area: Lbar;
}
ul{
text-decoration: none;
}
.rightBar{
grid-area: Rbar;
}
.contentArea{
grid-area: main;
}
.footerArea{
grid-area: foot;
border:5px;
padding:5px;
height:40%;
text-align:center;
background-color:cornflowerblue;
}
<!-- SlideShow Starts--!>
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: ghostwhite;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- SlideShow Ends--!>
img .title{
position:fixed;
}
/* Left Menu*/
.navigation {
padding: 0;
margin: 0;
border: 0;
line-height: 1;
}
.navigation ul, .navigation ul li, .navigation ul ul {
list-style: none;
margin: 0;
padding: 0;
}
.navigation ul {
z-index: 500;
float: left;
}
.navigation ul li {
float: left;
min-height: 0.05em;
line-height: 1em;
vertical-align: middle;
position: relative;
}
.navigation ul li.hover,
.navigation ul li:hover {
position: relative;
z-index: 510;
cursor: default;
}
.navigation ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 520;
width: 100%;
}
.navigation ul ul li { float: none; }
.navigation ul ul ul {
top: 0;
right: 0;
}
.navigation ul li:hover > ul { visibility: visible; }
.navigation ul ul {
top: 0;
left: 99%;
}
.navigation ul li { float: none; }
.navigation ul ul { margin-top: 0.05em; }
.navigation {
width:100%;
background: #1568ef;
font-family: 'roboto', Tahoma, Arial, sans-serif;
zoom:1;
}
.navigation:before {
content: '';
display: block;
}
.navigation:after {
content: '';
display: table;
clear: both;
}
.navigation a {
display: block;
padding: 1em 1.3em;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
.navigation > ul { width:12em; }
.navigation ul ul { width: auto; }
.navigation > ul > li > a {
border-right: 0.3em solid #34A65F;
color: #ffffff;
}
.navigation > ul > li > a:hover { color: #ffffff; }
.navigation > ul > li a:hover, .navigation > ul > li:hover a { background: #34A65F; }
.navigation li { position: relative; }
.navigation ul li.has-sub > a:after {
content: '»';
position: absolute;
right: 1em;
}
.navigation ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
.navigation ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
.navigation ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.navigation ul ul { border: 1px solid #34A65F; }
.navigation ul ul a { color: #ffffff; }
.navigation ul ul a:hover { color: #ffffff; }
.navigation ul ul li { border-bottom: 1px solid #0F8A5F; }
.navigation ul ul li:hover > a {
background: #4eb1ff;
color: #ffffff;
}
.navigation.align-right > ul > li > a {
border-left: 0.3em solid #34A65F;
border-right: none;
}
.navigation.align-right { float: right; }
.navigation.align-right li { text-align: right; }
.navigation.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
.navigation.align-right ul li.has-sub > a:after { content: none; }
.navigation.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
.navigation.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
.navigation.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
.navigation.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
<!-- counter-->
.main_container {
height: 146px;
width: auto;
padding: 3px;
margin: 2px;
max-width: 300px;
background-color: #555555;
align-content: center;
}
.container_inner {
height: auto;
border: none;
background-color: #555555;
max-width: 290px;
vertical-align: center;
padding-top: 12px;
padding-left: 10px;
align-content: center;
}
.num_tiles {
width:30px;
height: 30px;
background-color: #888888;
color: #ffffff;
font-size: 22px;
text-align: center;
line-height: 20px;
padding: 3px;
margin: 1.5px;
font-family: verdana;
vertical-align: center;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">"
<link rel="stylesheet" href="meu_css/meustyles.css">
</head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID');
</script>
<body>
<div class= "container">
<div class="title"><img src="img_meu/Header%20PGIMS3.png"></div>
<div class="navigation">
<ul>
<li> <a href="#officials">Officials</a>
<!--<ul>
<li class="has-sub"> <a href="#">Submenu 1.1</a>
<ul>
<li><a href="#">Submenu 1.1.1</a></li>
<li class="has-sub"><a href="#">Submenu 1.1.2</a>
<ul>
<li><a href="#">Submenu 1.1.2.1</a></li>
<li><a href="#">Submenu 1.1.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Submenu 1.2</a></li>
</ul> -->
</li>
<li class="has-sub"> <a href="#">Workshops</a>
<ul>
<li><a href="#facDev">Faculty programmes</a></li>
<li><a href="#pgOri">Postgraduate programmes</a></li>
<li><a href="#">CME's/sensitization Programmes</a></li>
</ul>
</li>
<li> <a href="#contact">Contact Us</a>
<!--<ul>
<li><a href="#">Submenu 3.1</a></li>
<li><a href="#">Submenu 3.2</a></li>
</ul> -->
</li>
</ul>
</div>
<div class="contentArea">
<div>
<div class="heading1">Medical Education Unit</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_meu/imgMeu1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img_meu/imgMeu2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img_meu/imgMeu3.jpg" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div><marquee style=" color:blue;font-family:sans-serif;font-size:1.25vw;background-color: #f9f6e3">This page is for information only and is under construction</marquee></div>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
</script>
<div style="overflow-x:auto;">
<div >
<table id = "officials" >
<caption style="font-size:2vw;">Officials</caption>
<tr>
<th class="No">S.No</th>
<th>Name</th>
<th>Designation</th>
</tr>
</tr>
</table>
</div>
</div>
<div>
<table>
<caption style="font:2vw;">Workshops</caption>
<tr>
<th id="facDev">Faculty Development Programmes</th>
</tr>
<tr><td>Thesis writing & Research methodology by team of UCMS, New Delhi organized from 11th -13th August 2015 at Pt. B D Sharma Post Graduate Institute of Medical Sciences, UHS, Rohtak</td></tr>
<tr><td>1st Revised Basic Course Workshop in Medical Education Technologies organized under the aegis of MCI Regional Centre for Medical Education Technologies, Maulana Azad Medical College, New Delhi at Pt. B D Sharma Post Graduate Institute of Medical Sciences, UHS, Rohtak from 17-19 April 2017.</td></tr>
<tr><td>2nd Revised Basic Course Workshop in Medical Education Technologies organized under the aegis of MCI Regional Centre for Medical Education Technologies, Maulana Azad Medical College, New Delhi at Pt. B D Sharma Post Graduate Institute of Medical Sciences, UHS, Rohtak from 27-29 November 2017.</td></tr>
<tr><td>3rd Revised Basic Course Workshop in Medical Education Technologies organized under the aegis of MCI Regional Centre for Medical Education Technologies, Maulana Azad Medical College, New Delhi at Pt. B D Sharma Post Graduate Institute of Medical Sciences, UHS, Rohtak from 26-28 March 2018.</td></tr>
</table>
</div>
<div>
<table>
<tr>
<th id="pgOri">Postgraduate orientation programmes</th>
</tr>
<tr><td>“Thesis protocol writing” workshop for 1st yr MD/MS/MDS (Admn. Year 2017) was held from 4th – 9th September 2017. </td></tr>
<tr><td>“Thesis Protocol Writing” for the 1st year M.D./M.S. residents (Admission year 2018) was held 6th – 11th August, 2018.</td></tr>
</table>
</div>
<div id="contact">
<p class= heading1>Contact</p>
<h3>Dr.Sarita Maggu, Dean, PGIMS</h3>
<p>tel:7988234270</p>
<h3>Dr.Sujata Sethi, Sr.Prof Psychiatry, PGIMS</h3>
<p>tel:9466749009</p>
</div>
</div>
<div class="rightBar"></div>
<div class="footerArea">
<p><strong>Page Designed and Developed by Dept of Information Technology,Pt.B.Sharma University of Health Sciences, Rohtak. © sukhdevchandla@gmail.com</strong></p>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
问题是您的行的大小始终为1fr（一小数），并且会在您调整视口大小时更改。
您可以尝试不定义grid-template-rows，而让行的大小是自动的。
在简历中，删除或评论此代码：
grid-template-rows:repeat(8, 1fr);