Full size vertical list vertically
I am trying to create a full screen vertical navigation overlay.
I would like to make the container the ul
full height of the page and then space each one evenly li
. This list is not fixed, so you are looking for something that changes dynamically.
Is there a FlexBox way?
https://jsfiddle.net/w3hppLss/
html, body{margin:0;padding:0;}
ul{list-style:none;height:100vh;}
li{background:grey;margin-bottom:5px;}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
+3
source to share
1 answer
use flexbox with flex-direction:column
in ul
and flex:1
inli
html,
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
height: 100vh;
background: red;
margin: 0;
padding: 0;
display: flex;
flex-direction: column
}
li {
flex: 1;
background:gray;
margin: 5px
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
+5
source to share