IE11上Flex布局的圣杯内容没有增长

时间：2018-11-02 03:43:35

标签： css sass responsive-design flexbox bootstrap-4

更新 我尝试将height:100vh添加到.app-container中，但这没用。

我正在使用bootstrap 4设计我的Web应用程序。 我正在尝试为此设计Holy grail layout。

在Chrome上一切正常，但在IE 11上一切正常。 在chrome上，我的布局是：

Chrome

但是IE 11上的内容与上面的内容不同：

IE

绿色区域不会像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;
  }
}

这是我的codepen

有人可以帮我吗？

谢谢

1 个答案:

答案 0 :(得分：1)

要解决此问题，您可以为flex容器添加特定的高度：min-height: 100vh;必须成为height: 100vh;，原因是此IE11错误：

  

在IE10和IE11中，显示为：flex和flex-direction的容器：   列将无法正确计算其屈挠孩子的尺寸，如果   容器具有最小高度，但没有明确的height属性   https://caniuse.com/#search=flex

在那之后，还请向您的flex-shrink: 0;中添加flex: 1 0 auto;或简写.app-content-container 

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /*min-height: 100vh;*/
}
.app-container .app-navigation-bar-container {
  flex: none;
  margin-bottom: 5px;
}
.app-container .app-content-container {
  /*flex: 1 0 auto; 
  background-color: green;*/

  flex: 1;
  -ms-flex: auto;
  -webkit-flex: 1;
  background-color: green;

  flex-shrink: 0; /* --> add this */
}
.app-container .app-footer {
  background-color: blue;
  min-height:50px;
}

.navbar-wrapper {
  height: 65px;
  position: inherit;
}
.navbar-wrapper .navbar-inner-wrapper {
  height: 55px;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel {
  display: flex;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  margin-bottom: 5px;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item {
  padding-right: 15px;
  padding-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  border-right: white solid 1px;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item:first-child {
  padding-left: inherit;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item:last-child {
  padding-right: inherit;
  border-right: inherit;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item .main {
  color: white;
  font-weight: bold;
  font-size: 16px;
}
.navbar-wrapper .navbar-inner-wrapper .navbar-panel .navbar-item .sub-header {
  color: white;
}

.navbar-divider {
  background-color: #ee8a01;
  height: 5px;
  margin-top: 5px;
}

.bg-red {
  background-color: #d61a0c;
}
.bg-red a {
  color: white;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<body style="min-height: 100%;" _nghost-c0="" ng-version="6.1.9">
    <router-outlet _ngcontent-c0=""></router-outlet>
    <authorize-layout _nghost-c1="">
        <div _ngcontent-c1="" class="app-container">
            <div _ngcontent-c1="" class="app-navigation-bar-container">
                <navigation-bar _ngcontent-c1="" _nghost-c2="">
                    <div _ngcontent-c2="" class="navbar-wrapper">
                        <div _ngcontent-c2="" class="bg-red navbar-inner-wrapper">
                            <div _ngcontent-c2="" class="col-lg-8 col-md-10 offset-lg-2 offset-md-1 navbar-panel">
                                <div _ngcontent-c2="" class="flex-grow-1"><img _ngcontent-c2="" style="height: 65px;" src="https://via.placeholder.com/150x65"></div>
                                <div _ngcontent-c2="" class="flex-grow-1 navbar-item">
                                    <div _ngcontent-c2="" class="main">Item 01</div>
                                    <div _ngcontent-c2="" class="sub-header">Item 01</div>
                                </div>
                                <div _ngcontent-c2="" class="flex-grow-1 navbar-item">
                                    <div _ngcontent-c2="" class="main">Item 02</div>
                                    <div _ngcontent-c2="" class="sub-header">Item 02</div>
                                </div>
                                <div _ngcontent-c2="" class="flex-grow-1 navbar-item">
                                    <div _ngcontent-c2="" class="main">Item 03</div>
                                    <div _ngcontent-c2="" class="sub-header">Item 03</div>
                                </div>
                                <div _ngcontent-c2="" class="flex-grow-1 navbar-item">
                                    <div _ngcontent-c2="" class="main">Item 04</div>
                                    <div _ngcontent-c2="" class="sub-header">Item 04</div>
                                </div>
                            </div>
                        </div>
                        <div _ngcontent-c2="" class="navbar-divider"></div>
                    </div>
                </navigation-bar>
            </div>
            <div _ngcontent-c1="" class="app-content-container">
                <div _ngcontent-c1="" class="col-lg-8 col-md-10 offset-lg-2 offset-md-1">
                    <div _ngcontent-c1="" class="row"> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div>
                    <div _ngcontent-c1="" class="row"> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div>
              

                </div>
            </div>
            <div _ngcontent-c1="" class="app-footer"></div>
        </div>
    </authorize-layout>
</body>

经过IE11，Firefox和Chrome的测试。 希望能帮助到你。 ：）

相关问题
最新问题