ros*_*s-u 1 html css scrollbar css-grid
我正在尝试掌握 CSS Grid，这是从以前使用我习惯的 Bootstrap 的过渡。
我创建了一个简单的布局（4 行和 6 列），但是底部有一个不需要的空白，导致可见的滚动。
有没有办法在不为 .container 元素设置确切高度的情况下解决这个问题？当我将高度设置为 .container (height: 500px) 时，问题就消失了。这是绕过它的方法吗？我不想使用可能在较小或较大视口上导致问题的快速修复。
.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。
* {
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>