CSS网格-底部的空白以及如何将其删除 [英] CSS Grid - White space on the bottom and how to remove it
问题描述
我正试图掌握CSS网格，这是从以前使用我惯用的Bootstrap过渡过来的.
I am trying to get a hold of the CSS Grid, a transition from previously using the Bootstrap that I'm used to.
我创建了一个简单的布局(4行和6列)，但是底部没有多余的空格，导致滚动可见.
I created a simple layout (4 rows & 6 columns) however, there is an unwanted whitespace on the bottom, causing a visible scroll.
是否有一种方法可以解决此问题，而无需为.container元素设置确切的高度?当我将高度设置为.container(高度:500像素)时，问题就消失了.这是解决方法吗?我不想使用快速修复程序，可能会在较小或较大的视口上给我带来麻烦.
Is there a way to fix this without setting the exact height to the .container element? When I set the height to the .container (height: 500px), the problem goes away. Is this the way to go around it? I don't want to use a quick fix that will cause me a problem down the way maybe on smaller or larger viewports.
.grid{
display: grid;
position: relative;
margin: auto;
grid-template-areas:
"nav nav nav nav nav nav"
"logo logo logo logo logo logo"
"main main main main main side"
"footer footer footer footer footer footer";
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 50px 50px 1fr 1fr;
}
.nav{
grid-area: nav;
background-color:green;
}
.logo{
grid-area: logo;
background-color:salmon;
}
.main{
grid-area: main;
background-color:cadetblue;
min-height: 800px;
height: auto;
}
.side{
grid-area: side;
background-color:lightpink;
min-height: 800px;
height: auto;
}
.footer{
grid-area: footer;
background-color:sandybrown;
height: 50px;
}
.overlap{
background-color: hotpink;
grid-area: 3/ 3/ 3/ 4;
z-index: 5;
}<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSSGrid</title>
</head>
<body>
<div class="grid">
<nav class="nav"></nav>
<div class="logo"></div>
<div class="overlap">
<h3>Overlap!</h3>
</div>
<section class="main"></section>
<aside class="side"></aside>
<footer class="footer"></footer>
</div>
</body>
</html>推荐答案
因为您希望4行和其中的一个占用尽可能多的空间( 1fr )，最后一行应该具有固定高度或设置为 auto .
Since you want 4 rows and one of them to take up as much room as possible (1fr), the final row should either have a fixed height or be set to auto.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.grid {
display: grid;
position: relative;
margin: auto;
grid-template-areas: "nav nav nav nav nav nav" "logo logo logo logo logo logo" "main main main main main side" "footer footer footer footer footer footer";
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 50px 50px 1fr auto;
}
.nav {
grid-area: nav;
background-color: green;
}
.logo {
grid-area: logo;
background-color: salmon;
}
.main {
grid-area: main;
background-color: cadetblue;
min-height: 800px;
height: auto;
}
.side {
grid-area: side;
background-color: lightpink;
min-height: 800px;
height: auto;
}
.footer {
grid-area: footer;
background-color: sandybrown;
height: 50px;
}
.overlap {
background-color: hotpink;
grid-area: 3/ 3/ 3/ 4;
z-index: 5;
}<div class="grid">
<nav class="nav"></nav>
<div class="logo"></div>
<div class="overlap">
<h3>Overlap!</h3>
</div>
<section class="main"></section>
<aside class="side"></aside>
<footer class="footer"></footer>
</div>这篇关于CSS网格-底部的空白以及如何将其删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
