【发布时间】：2019-03-06 23:48:35
【问题描述】：
我一直在尝试使用 CSS-Grid 制作简单的网站布局。 一切工作正常并且响应迅速，但是当我将浏览器最小化到非常小的分辨率时，会出现滚动条并且 css-grid 停止在整个页面高度上延伸，从而导致底部出现空白区域。
要明白我的意思，只需运行我在低高度窗口中打开时插入的 sn-p。我还上传了它在我的浏览器上显示的图片。
它在正常高度上的显示方式：
当我降低高度时会发生什么：
我尝试使用overflow 和min-height，但无法解决。这不是一个真正的关键问题，但我真的很想了解它为什么会发生。谢谢！
body, html{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
}
.grid-container-1{
height: 100vh;
min-height: 100vh;
min-width: 300px;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 8% 70% auto 8% ;
grid-template-areas:
"header1 header1 header1 header1"
"Cover Cover Cover Cover"
"Project Project Project Project"
"Footer Footer Footer Footer"
}
.header1{
grid-area: header1;
}
.cover{
grid-area: Cover;
}
.Project{
grid-area: Project;
}
.Footer{
grid-area: Footer;
}
.zone {
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #56B870; /* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56B870), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #56B870 0%,#a5c956 100%); /* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #C655BE; /* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C655BE), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #C655BE 0%,#cf0404 100%); /* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
background: #F3AAAA; /* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F3AAAA), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #F3AAAA 0%,#febf04 100%); /* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}<!DOCTYPE html>
<html>
<head>
<title>CSS Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid-container-1">
<div class="header1 zone green">
Header
</div>
<div class="cover zone red">
Cover
</div>
<div class="Project zone blue">
Projects
</div>
<div class="Footer zone yellow">
Footer
</div>
</div>
</body>
</html>【问题讨论】：
标签： html css font-size css-grid