我希望版式为页面的100％，但底部显然有一个小的间隙除非我在子网格之一中输入丰富的内容，否则应该有一种方法使页面的布局变为100％，然后应该出现滚动条。
即使父网格设置为100vh 100wh，布局中也存在间隙。
*{ margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; } .grid { width: 100vw; height: 100vh; display: grid; grid-template-columns: 4.5% 95.5%; grid-template-rows: 7% 89% 4%; grid-template-areas: "sidebar header" "sidebar content" "footer footer"; } .header{ grid-area: header; background-color: #EDEDED; } .sidebar{ grid-area: sidebar; background-color: #EDEDED; } .content{ grid-area: content; background-color: #f7f7f7; display: grid; width:100%; height:100%; } .footer{ grid-area: footer; background-color: green; } .img-circle { width: 70%; background: #fff; margin-left: 15%; z-index: 1000; position: inherit; margin-top: 20px; border: 1px solid rgba(52,73,94,.44); padding: 4px; border-radius: 50%; } .sidebar{ padding-left: 0; display: block; margin-bottom: 0; list-style: none; } .maintenance{ display:grid; grid-template-rows: 15% 85%; grid-template-areas: "maintenance-nav" "maintenance-info" } .maintenance-nav{ grid-area: maintenance-nav; background-color: ##f7f7f7; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #25aaff; } .maintenance-info{ grid-area: maintenance-info; background-color: blue; } .components{ display:grid; grid-template-columns: 30% 70%; grid-template-rows: 10% 90%; grid-template-areas: "components-name components-nav" "components-name components-data"; width:100%; height: 100%; } .components-name{ grid-area:components-name; background-color: red; } .components-nav{ grid-area: components-nav; background-color: blue; display:flex; justify-content: space-around; align-items: center; background-color: #f7f7f7; } .components-data{ grid-area: components-data; background-color: yellow; } .maintenance-nav > div { display: inline-block; height: 60px; background-color: white; text-align: center; margin: 30px; border-radius: 10px; width: 13%; font-family: "Helvetica Neue",Roboto,Arial,"Droid Sans",sans-serif; } .components-nav-links li { list-style: none; display: inline-block; padding: 0px 20px; } .components-nav-links li a{ transition: all 0.3s ease 0s; } .components-nav-links li a:hover { color:#419C99; }<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/custom.css') }}"> <title></title> </head> <body> <!--Layout grid --> <div class="grid"> <!--header grid--> <div class="header">Header</div> <!--sidebar grid--> <div class="sidebar"> <!--sidebar logo--> <img src="{{ url_for('static', filename='images/fleet.png') }}" alt="..." class="img-circle profile_img"></div> <!--nav list--> <div> </div> <!--contenant grid--> <div class="content"> <div class="maintenance"> <div class="maintenance-nav"> <div>Components</div> <div>Worklist</div> <div>Running Hours</div> <div>Jobs Report</div> <div>Cost Estimation</div> <div>Logs</div> </div> <div class="maintenance-info"> <div class=components> <div class="components-name"></div> <div class="components-nav"> <nav> <ul class="components-nav-links"> <li><a href="#">Component Data</a></li> <li><a href="#">Jobs</a></li> <li><a href="#">Documents</a></li> <li><a href="#">Logs</a></li> </ul> </nav> </div> <div class="components-data">Components data</div> </div> </div> </div> </div> </div> <!--footer grid--> <div class="footer">Footer</div> </div> </body> </html>
布局中的问题，我希望布局占页面的100％，但显然在底部有一个小缝隙，除非我在其中输入一个丰富的内容，否则有一种方法可以使布局占页面的100％。 。
您的页脚位于网格元素外部，因为您要关闭的</div>过多。
您已将容器.grid的显示定义为grid，并且还在容器grid-template-areas中定义了.grid。但是，当在HTML文件中编写标记时，您已将.footer容器置于.grid父容器之外。