【发布时间】：2020-05-15 20:30:43
【问题描述】：
布局中的问题
我希望布局是页面的 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>【问题讨论】：