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
当您打开全屏时,就会发生这种情况:
尝试在height: 100%
和body
元素上使用html
,但当您有另一个flex
元素flex-wrap: wrap
时,它无法正常工作在flex-child
之后的aside
元素之一,紧跟在section
之后的body
或display:flex
之内。我试图从其中一个元素中移除> var _ = require('lodash');
> var compiled = _.template('Hi <%= user %>!');
> compiled({ user: 'Axel' })
"Hi Axel!"
> compiled.source
"function(obj) {
obj || (obj = {});
var __t, __p = '';
with (obj) {
__p += 'Hi' + ((__t = ( user )) == null ? '' : __t) + '!';
}
return __p
}"
> var fs = require('fs')
> var src = 'module.exports = ' + compiled.source;
> fs.writeFileSync('mylittlescript.js', src);
并且它打破了布局,但问题消失了。
答案 0 :(得分:5)
只需将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>