Margin-top: auto для отправки последнего элемента списка вниз, но элемент обрезается
У меня есть боковая панель со 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>
Ответы 2
Вы можете использовать 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>@SystemGlitch, каким образом вы предлагаете мне сохранить тот же макет и улучшить его? Я не хочу использовать здесь абсолютное позиционирование. Когда размер экрана действительно маленький, нижний элемент будет перекрывать другие. Я хочу, чтобы он всегда оставался внизу.
Прошу прощения, я забыл упомянуть в своем посте, что не хочу использовать здесь абсолютное позиционирование, потому что, когда размер экрана действительно маленький, нижний элемент будет перекрывать другие. Есть ли способ сделать это с помощью flexbox и margin-top: auto и заставить его работать?
<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>
Вот флаг внизу боковой панели Это то, что вы ищете?
Прошу прощения, я забыл упомянуть в своем посте, что не хочу использовать здесь абсолютное позиционирование, потому что, когда размер экрана действительно маленький, нижний элемент будет перекрывать другие. Есть ли способ сделать это с помощью flexbox и margin-top: auto и заставить его работать?
Попробуйте это .menu li: last-child {margin-top: 56.4vh! Important; }
Этот ответ правильный, но я думаю, что это плохой выбор дизайна, так как если высота обзора ниже, чем высота боковой панели, компоненты будут перекрываться и сделать боковую панель непригодной для использования. Боковая панель должна иметь минимальную высоту своего содержимого, а контейнер, на мой взгляд, должен позволять вертикальную прокрутку.