UPDATE
Я попытался добавить height:100vh в .app-container, но это не работает.
Я использую bootstrap 4 для разработки своего веб-приложения.
Я пытаюсь придумать Holy grail layout к нему.
Кажется, все хорошо на Chrome, но IE 11.
На Chrome мой макет:
Но то, что на IE 11 отличается от приведенного выше:
Зеленая область не растет так, как в Chrome.
Вот мои layout.scss классы, которые я использую:
.app-container {
display: flex;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
min-height: 100vh;
.app-navigation-bar-container {
flex: none;
-ms-flex: none;
-webkit-flex: none;
margin-bottom: 5px;
}
.app-content-container {
flex: 1;
-ms-flex: auto;
-webkit-flex: 1;
background-color: green;
}
.app-footer {
background-color: blue;
height: 50px;
}
}
$navbar-wrapper-height: 65;
$navbar-inner-wrapper-height: 55;
$navbar-panel-margin-bottom: 5;
.navbar-wrapper {
height: #{$navbar-wrapper-height}px;
position: inherit;
.navbar-inner-wrapper {
height: #{$navbar-inner-wrapper-height}px;
.navbar-panel {
display: flex;
flex-direction: row;
-ms-flex-direction: row;
-webkit-flex-direction: row;
margin-bottom: #{$navbar-panel-margin-bottom}px;
.navbar-item {
padding-right: 15px;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
border-right: white solid 1px;
&:first-child {
padding-left: inherit;
}
&:last-child {
padding-right: inherit;
border-right: inherit;
}
.main {
color: white;
font-weight: bold;
font-size: 16px;
}
.sub-header {
color: white;
}
}
}
}
}
.navbar-divider {
background-color: #ee8a01;
height: 5px;
margin-top: #{$navbar-wrapper-height - $navbar-inner-wrapper-height - $navbar-panel-margin-bottom}px;
}
.bg-red {
background-color: #d61a0c;
a {
color: white;
}
}
Вот мой кодовый блок
Может кто-нибудь помочь мне, пожалуйста?
Спасибо