html,
body {
height: 100%;
}
.site-main {
height: calc(100% - 72px);
display: flex;
}
.site-main > div {
min-width: 85%;
height: 100%;
}
.site-main > aside {
min-width: 15%;
height: 100%;
background-color: $darkest-blue-grey;
}
Title
我有header一个固定height的72px.
我给了.site-main div一个width的85%.
我给了 .site-main aside一个width的15%.
我想要的是.site-main div并.site-main aside肩并肩,并.site-main填补剩余的空白区域header.
并拥有.site-main div和.site-main aside填充.site-main的高度.
任何帮助将不胜感激!
你可以使用flex-direction: columnon body和flex: 1on site-main.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
padding: 0;
}
header {
height: 75px;
}
.site-main {
display: flex;
flex: 1;
}
.site-main div {
flex: 0 0 85%;
background: lightblue;
}
aside {
flex: 0 0 15%;
background: lightgreen;
}
Title
京公网安备 11010802040832号 | 京ICP备19059560号-6 