CSS Grid - 底部的空白以及如何删除它
[英]CSS Grid - White space on the bottom and how to remove it
问题描述
I am trying to get a hold of the CSS Grid, a transition from previously using the Bootstrap that I'm used to.
我正在尝试掌握 CSS Grid，这是从以前使用我习惯的 Bootstrap 的过渡。
I created a simple layout (4 rows & 6 columns) however, there is an unwanted whitespace on the bottom, causing a visible scroll.我创建了一个简单的布局（4 行和 6 列），但是底部有一个不需要的空白，导致可见滚动。
Is there a way to fix this without setting the exact height to the .container element?有没有办法在不为 .container 元素设置确切高度的情况下解决这个问题？ When I set the height to the .container (height: 500px), the problem goes away.当我将高度设置为 .container（高度：500px）时，问题就消失了。 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 个解决方案
解决方案1
6 2018-07-31 15:33:08
Change grid-template-rows to 50px 50px 1fr .将grid-template-rows更改为50px 50px 1fr 。 You can also try height: fit-content .您也可以尝试height: fit-content 。
解决方案2
6 已采纳 2018-07-31 16:07:27
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 .由于您希望 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>
解决方案3
2 2018-07-31 15:31:22
Replace代替
grid-template-rows: 50px 50px 1fr 1fr;
With和
grid-template-rows: 50px 50px 1fr;
You're basically just adding another set of rows underneath your needed ones.您基本上只是在您需要的行下方添加另一组行。
解决方案4
1 2022-06-28 06:26:46
We can provide grid height 100%, show that the bottom empty space will be removed.我们可以提供 100% 的网格高度，显示底部的空白空间将被移除。 And make sure while provide height 100% to grid element, parent should have height in percentage.并确保在为网格元素提供 100% 的高度时，父级应具有百分比高度。
* { height: 100%; weight: 100% } .grid{ height: 100%; 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.