我有一个100%高度的侧边栏，其中包含一个div和一个ul。div将用于侧边栏顶部的图像，ul将用于所有侧边栏菜单项。在这里，将div项添加到ul不是一个选项，它需要是单独的。
ul的最后一项必须始终位于侧边栏的底部。我正在尝试使用margin-top:auto来实现这一点。当ul是侧边栏中唯一的项目时，它可以完美地工作，但由于div位于ul之上，列表中的最后一个项目会被推离屏幕。
我该如何防止这种情况发生？下面是我的HTML和CSS。目标是使标志图标始终显示在侧边栏的底部，同时在侧边栏中具有div和ul。
我不想使用绝对定位作为解决方案，因为当屏幕尺寸很小时，底部项目会与其他项目重叠
body {
margin: 0px;
background-color: #F7F7F7;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
overflow: hidden;
}
.sidebar {
height: 100%;
flex: 0;
background-color: #464F57;
}
.main {
display: flex;
flex-direction: column;
flex: 1;
margin-left: 20px;
}
.header {
flex: 0;
margin-bottom: 20px;
border-bottom: solid 2px #eaeaea;
}
.content {
overflow-y: auto;
flex: 1;
}
.menu {
display: flex;
flex-direction: column;
list-style: none;
text-align: center;
height: 100%;
margin: 20px 0 0 0;
padding: 0;
}
.menu li:last-child {
margin-top: auto;
}<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet"/>
<div class="container">
<div class="sidebar">
<div>
<i class="fa fa-home fa-3x"></i>
</div>
<ul class="menu">
<li><i class="fa fa-camera-retro fa-3x"></i></li>
<li><i class="fa fa-camera-retro fa-3x"></i></li>
<li><i class="fa fa-camera-retro fa-3x"></i></li>
<li><i class="fa fa-camera-retro fa-3x"></i></li>
<li><i class="fa fa-flag fa-3x"></i></li>
</ul>
</div>
<div class="main">
<div class="header">
header
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus aliquam accumsan. Aenean vel dui tellus.
Nulla porttitor ante augue, et posuere ex consequat ac. Nulla eget vestibulum leo. Aliquam </p>
</div>
</div>
</div>您可以使用bottom: 0和position: absolute来解决您的问题。在这种情况下，你的侧边栏应该有position: relative。查看绝对定位内部相对定位的链接，了解有关此样式的详细信息。
以下是工作代码(JSFiddle(：
body {
margin: 0px;
background-color: #F7F7F7;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
overflow: hidden;
}
.sidebar {
height: 100%;
flex: 0;
background-color: #464F57;
position: relative;
}
.main {
display: flex;
flex-direction: column;
flex: 1;
margin-left: 20px;
}
.header {
flex: 0;
margin-bottom: 20px;
border-bottom: solid 2px #eaeaea;
}
.content {
overflow-y: auto;
flex: 1;
}
.menu {
display: flex;
flex-direction: column;
list-style: none;
text-align: center;
height: 100%;
margin: 20px 0 0 0;
padding: 0;
}
.menu li:last-child {
bottom: 0;
position: absolute;
}<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" />
<div class="container">
<div class="sidebar">
<div>
<i class="fa fa-home fa-3x"></i>
</div>
<ul class="menu">
<li><i class="fa fa-camera-retro fa-3x"></i></li>
<li><i class="fa fa-camera-retro fa-3x"></i></li>
<li><i class="fa fa-camera-retro fa-3x"></i></li>
<li><i class="fa fa-camera-retro fa-3x"></i></li>
<li><i class="fa fa-flag fa-3x"></i></li>
</ul>
</div>
<div class="main">
<div class="header">
header
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus aliquam accumsan. Aenean vel dui tellus. Nulla porttitor ante augue, et posuere ex consequat ac. Nulla eget vestibulum leo. Aliquam </p>
</div>
</div>
</div><style type="text/css">
body {
margin: 0px;
background-color: #F7F7F7;
}
.container {
height: 100vh;
display: flex;
flex-direction: row;
overflow: hidden;
}
.sidebar {
height: 100%;
flex: 0;
background-color: #464F57;
position:relative;
}
.main {
display: flex;
flex-direction: column;
flex: 1;
margin-left: 20px;
}
.header {
flex: 0;
margin-bottom: 20px;
border-bottom: solid 2px #eaeaea;
}
.content {
overflow-y: auto;
flex: 1;
}
.menu {
display: flex;
flex-direction: column;
list-style: none;
text-align: center;
height: 100%;
margin: 20px 0 0 0;
padding: 0;
}
.menu li:last-child {
position:absolute; bottom:0;
}
</style>
这是侧栏底部的标志这就是你要找的吗？