Menu
CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
background-color: #F5F5F5;
}
body > header {
display: flex;
position: fixed;
width: 100%;
height: 60px;
align-items: center;
background-color: #373737;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.19);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.19);
}
aside {
width: 250px;
background-color: #484848;
font-size: 18px "SL";
margin-top: 60px;
}
aside > ul.side-menu {
list-style-type: none;
margin-top: 25px;
width: 100%;
}
aside > ul > li > a {
display: block;
text-decoration: none;
font-family: "SL";
font-size: 18px;
line-height: 40px;
padding-left: 20px;
color: #CCCCCC;
border-bottom: 1px solid #8E8E8E;
transition: 300ms;
}
aside > ul > li > a.active {
color: white;
}
HTML:
<body>
<header>
</header>
<aside>
<ul class="side-menu">
<li><a href="#" class="active">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
</ul>
</aside>
</body>
Codepan:
https://codepen.io/UADev/pen/zzmdPG
When you're opening fullscreen, this is what's happening:
Tried to use height: 100% on body and html elements, but it doesn't work correctly when you have another flex element with flex-wrap: wrap inside one of the flex-child elements like aside or section that follows immediately after body. I tried to remove display:flex from one of those elements and it's broke the layout, but problem disappeared.
981
Just add min-height: 100vh to the parent (body) and the default value align-items: stretch will cause the children to to fill the height of the parent.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
background-color: #F5F5F5;
min-height: 100vh;
}
body > header {
display: flex;
position: fixed;
width: 100%;
height: 60px;
align-items: center;
background-color: #373737;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.19);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.19);
}
aside {
width: 250px;
background-color: #484848;
font-size: 18px "SL";
margin-top: 60px;
}
aside > ul.side-menu {
list-style-type: none;
margin-top: 25px;
width: 100%;
}
aside > ul > li > a {
display: block;
text-decoration: none;
font-family: "SL";
font-size: 18px;
line-height: 40px;
padding-left: 20px;
color: #CCCCCC;
border-bottom: 1px solid #8E8E8E;
transition: 300ms;
}
aside > ul > li > a.active {
color: white;
}<body>
<header>
</header>
<aside>
<ul class="side-menu">
<li><a href="#" class="active">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
<li><a href="#">123</a></li>
</ul>
</aside>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
