CSS Grid - 底部的空白以及如何刪除它
[英]CSS Grid - White space on the bottom and how to remove it
問題描述
我正在嘗試掌握 CSS Grid，這是從以前使用我習慣的 Bootstrap 的過渡。
我創建了一個簡單的布局（4 行和 6 列），但是底部有一個不需要的空白，導致可見滾動。
有沒有辦法在不為 .container 元素設置確切高度的情況下解決這個問題？ 當我將高度設置為 .container（高度：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 個解決方案
解決方案1
6 2018-07-31 15:33:08
將grid-template-rows更改為50px 50px 1fr 。 您也可以嘗試height: fit-content 。
解決方案2
6 已采納 2018-07-31 16:07:27
由於您希望 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
代替
grid-template-rows: 50px 50px 1fr 1fr;
和
grid-template-rows: 50px 50px 1fr;
您基本上只是在您需要的行下方添加另一組行。
解決方案4
1 2022-06-28 06:26:46
我們可以提供 100% 的網格高度，顯示底部的空白空間將被移除。 並確保在為網格元素提供 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.