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>
代码盘:
https://codepen.io/UADev/pen/zzmdPG
当您打开全屏时，会发生以下情况:
尝试在 body 和 html 元素上使用 height: 100%，但是当你有另一个 时它不能正常工作>flex 元素与 flex-wrap: wrap 在 flex-child 元素之一内，如 aside 或 section 紧跟在 body 之后。我试图从其中一个元素中删除 display:flex，它破坏了布局，但问题消失了。
最佳答案
只需将 min-height: 100vh 添加到父级(body)，默认值 align-items: stretch 将导致子级以填充父级的高度。
* {
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>关于html - 等高 flex 列被显示为 : flex 的子元素破坏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44992046/