我已经使用CSS网格创建了基本布局。布局使用自动填充行将侧边栏扩展到可见页面的底部。该布局在Chrome上运行良好，但在Firefox上创建了不必要的滚动条。无论如何，是否有其他方法可以解决此问题，然后禁用滚动功能？我已经尝试过将列高设为100％
<head>
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<style>
.hidden_row {
display:none;
}
li:hover{
background-color: #eaf7ff;
}
.active{
background-color: #eaf7ff;
}
li a i{
margin-right:3px;
color:#9aa8af;
}
body{
margin:0;
padding:0;
}
*{ box-sizing: border-box;
}
.ul-wrap{
display:flex;
justify-content:center;
}
.wrapper{
height:100vh;
display:grid;
grid-template-columns: repeat(2, 200px 1fr);
grid-auto-rows: minmax(50px, auto-fill);
}
.one{
grid-column: 1 / 2;
grid-row: 1/ 20;
background-color:#3f4754;
display:flex;
flex-direction:column;
flex:wrap;
align-items:center;
justify-content:center;
flex:2;
}
.two{
min-height:50px;
grid-column: 2 / 5;
grid-row: 1/2;
border-bottom:1.2px solid grey;
display:flex;
align-items:center;
justify-content:flex-end;
}
.three{
background-color:#F0F0F0;
grid-column: 2 / 5;
grid-row: 2/6;
display:flex;
flex-wrap:wrap;
align-content:center;
justify-content:space-around;
}
.four{
grid-column: 2 / 5;
grid-row: 6/20;
background-color:#F0F0F0;
}
.sidebar-upload{
margin-bottom:10px;
height:175px;
width:175px;
font-size:11px;
border: 2px dashed #ccc;
line-height:200px;
text-align:center;
border-radius:4px;
color:white;
}
.sidebar-content.dragover{
border-color:#000;
color:#000;
}
.sidebar-userinfo h1{
margin-left:5;
margin-right:5;
}
.sidebar-userinfo{
height:100px;
width:200px;
font-size:11px;
display:flex;
align-items:center;
justify-content:center;
}
.navbar{
margin-left:0;
margin-right:0;
margin-top:0;
padding:0;
margin-bottom:auto;
list-style:none;
width:100%;
}
li a{
text-decoration:none;
color:#9aa8af;
}
li{
display:block;
padding-top:1em;
padding-bottom:1em;
border-bottom:1px solid rgba(100,100,100,0.3);
display:flex;
align-items:center;
justify-content:center;
}
.search-c{
display:flex;
background-color:#3f4754;
border-radius:40px;
padding-top: 10px;
padding-bottom: 10px;
height:40px;
max-width:240px;
justify-content:flex-end;
align-content:center;
}
.search-c:hover > .search-btn{
background:white;
}
.search-c:hover > .search-txt{
width:240px;
padding: 0 6px;
}
.search-btn{
color: #e84118;
width:40px;
height:40px;
border-radius:50%;
background: #2f3640;
display:flex;
justify-content:center;
align-items:center;
transform:translate(0,-25%);
}
.upload-btn{
color: #e84118;
width:40px;
height:40px;
border-radius:50%;
background: #2f3640;
display:flex;
justify-content:center;
align-items:center;
margin-right:1%;
margin-left:1%;
}
.search-txt{
border:none;
background:none;
outline:none;
padding: 0;
color:white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
float:left;
width:0px;
}
</style>
</head>
<body>
<div class=wrapper>
<div class=one>
<div class="sidebar-userinfo">
<img class="profile-pic" src="Images/no-profile-pic.png" height=50px width=50px>
<h1>UserInfo</h1>
<img class="cog" src="Images/cog.png" height=25px width=25px>
</div>
<ul class="navbar">
<li class="active"><a href="#"><i class="fas fa-home" aria-hidden="true"></i>Home</a></li>
<li><a href="#"><i class="fas fa-clock" aria-hidden="true"></i>Recent</a></li>
<li><a href="#"><i class="fas fa-users" aria-hidden="true"></i>Following</a></li>
<li><a href="#"><i class="far fa-file" aria-hidden="true"></i>Files</a></li>
<li><a href="#"><i class="fas fa-address-card" aria-hidden="true"></i>About</a></li>
</ul>
<div class="sidebar-upload" id="dropzone">
Drop files here to here
</div>
</div>
<div class=two>
<div class="search-c">
<input class="search-txt" type="text" placeholder="Search Files.." name="search-txt">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
<a class="upload-btn" href="#">
<i class="fas fa-upload"></i>
</a>
</div>
<div class=three>
</div>
<div class=four>
</div>
</div>
</body>
</html>