大图像打破了 flexbox “页脚始终位于底部”的结构答案

【问题标题】：Large image breaks flexbox "footer always at bottom" structure大图像打破了 flexbox “页脚始终位于底部”的结构
【发布时间】：2019-05-18 15:08:24
【问题描述】：

我有一个粘性页脚布局，页脚始终位于页面底部（即使没有内容）。

在所有主流浏览器中一切正常，但我在 IE11 中遇到了一个奇怪的问题：当我使用大图像时，它在内容结尾和页脚之间有多余的空间。（看起来图片显示正确，但浏览器计算的高度不正确？）

应该是这样的：

* {
  padding: 0;
  margin: 0;
}

.site {
  /*
      Old IE flexbox syntax is not needed anymore for IE11 (https://caniuse.com/#search=flexbox)
      display: -ms-flexbox;
  */
}

.site__container {
  display: flex;
  flex-direction: column;
  /*In IE11, the parent element needs a height to be able to put the footer at the bottom. 
      (height value doesn't matter, it just needs height. example: "height: 0;")
      (https://stackoverflow.com/questions/24396205/flex-grow-not-working-in-internet-explorer-11)
  */
  height: 0;
  min-height: 100vh;
}

.site__main {
  flex: 1 0 auto;
  /* Setting flex-grow: 1 on main makes it grow to fill the available space. */
}

.site__header,
.site__main,
.site__footer {
  /* By default, flex-shrink is set to 1. This makes the items shrink 
     if there is not enough space, which happens if the content is larger than the screen. 
  */
  flex-shrink: 0;
}

.site__content {
  padding-bottom: 30px;
}

.site__content p {
  line-height: 25px;
}

.site__header {
  background: red;
}

.site__main {
  background: green;
}

.site__footer {
  background: blue;
}

section {
  /* height: 30px; */
  background: salmon;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <title>Document</title>
</head>

<body>
  <div class="site__container">
    <header class="site__header">Header</header>
    <main class="site__main">
      <section>
        <div class="col-12">
          <div class="row">
            <div class="container">
              <div class="row">
                <div class="col-12 col-md-6">
                  <img src="https://placehold.it/500x300" alt="" class="img-fluid">
                </div>
                <div class="col-12 col-md-6">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo sed molestias voluptatum perferendis ea nisi minus, illo iusto ut quaerat saepe sunt asperiores itaque pariatur earum incidunt quos culpa vero excepturi magni quod corrupti aperiam doloremque?
                  Esse rerum officia modi consequatur? Ex aspernatur repellat id, ut aut nam? Esse, aut?
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section><div class="col-12">
        <div class="row">
          <div class="container">
            <div class="row">
              <div class="col-12">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
                Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
                Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
                Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
                Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
                Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
                Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
                Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
                Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
                Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
              </div>
            </div>
          </div>
        </div>
      </div></section>
      <section><div class="col-12">
        <div class="row">
          <div class="container">
            <div class="row">
              <div class="col-12">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
                Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
                Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
                Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
                Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
                Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
                Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
                Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
                Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
                Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
              </div>
            </div>
          </div>
        </div>
      </div></section>
    </main>
    <footer class="site__footer">Footer</footer>
  </div>
</body>

</html>

当我使用上面的示例并将图像url 替换为https://placehold.it/5000x3000 时，绿色区域变得更大，并且在内容和页脚之间产生了不需要的填充，尽管其中没有内容。（记住，这个问题只在IE11，其他浏览器没有）

【问题讨论】：

我只是注释了包含 flex 的属性。而在IE11中，大图效果很好。i.stack.imgur.com/1llxk.jpg你想让它显示成什么样子？
正确，但是当没有足够的文本填满整个屏幕时，页脚也必须留在底部。这就是为什么需要 flex 的原因。 (prnt.sc/lwet7h)

标签： html css flexbox internet-explorer-11

【解决方案1】：

只需删除 site__container 类的 display:flex 和 flex-direction:column 属性即可。因为 Internet Explorer 不支持 flex-direction 属性。

Read the reference

* {
    padding: 0;
    margin: 0;
}
html {
    position: relative;
    min-height: 100%;
}
.site {
    /*
      Old IE flexbox syntax is not needed anymore for IE11 (https://caniuse.com/#search=flexbox)
      display: -ms-flexbox;
  */
}

.site__container {
    /*display: flex;
    flex-direction: column;
    height: 0;
    min-height: 100vh;*/
    /*In IE11, the parent element needs a height to be able to put the footer at the bottom. 
      (height value doesn't matter, it just needs height. example: "height: 0;")
      (https://stackoverflow.com/questions/24396205/flex-grow-not-working-in-internet-explorer-11)
  */
    margin-bottom: 60px;
}

.site__main {
    flex: 1 0 auto;
    /* Setting flex-grow: 1 on main makes it grow to fill the available space. */
}

.site__header,
.site__main,
.site__footer {
    /* By default, flex-shrink is set to 1. This makes the items shrink 
     if there is not enough space, which happens if the content is larger than the screen. 
  */
    flex-shrink: 0;
}

.site__content {
    padding-bottom: 30px;
}

.site__content p {
    line-height: 25px;
}

.site__header {
    background: red;
}

.site__main {
    background: green;
}

.site__footer {
    background: blue;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
}

section {
    /* height: 30px; */
    background: salmon;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <title>Document</title>
</head>

<body>
  <div class="site__container">
    <header class="site__header">Header</header>
    <main class="site__main">
      <section>
        <div class="col-12">
          <div class="row">
            <div class="container">
              <div class="row">
                <div class="col-12 col-md-6">
                  <img src="https://placehold.it/5000x3000" alt="" class="img-fluid">
                </div>
                <div class="col-12 col-md-6">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo sed molestias voluptatum perferendis ea nisi minus, illo iusto ut quaerat saepe sunt asperiores itaque pariatur earum incidunt quos culpa vero excepturi magni quod corrupti aperiam doloremque?
                  Esse rerum officia modi consequatur? Ex aspernatur repellat id, ut aut nam? Esse, aut?
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section><div class="col-12">
        <div class="row">
          <div class="container">
            <div class="row">
              <div class="col-12">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
                Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
                Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
                Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
                Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
                Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
                Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
                Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
                Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
                Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
              </div>
            </div>
          </div>
        </div>
      </div></section>
      <section><div class="col-12">
        <div class="row">
          <div class="container">
            <div class="row">
              <div class="col-12">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus consequatur eligendi nemo iure a reiciendis, quos asperiores tempora eveniet nam adipisci praesentium, facilis nihil unde ut. Provident quibusdam culpa autem.
                Quis odio repellat quam maxime natus illum nemo sequi dignissimos qui asperiores perspiciatis impedit placeat dicta, reprehenderit nam debitis quos odit! Pariatur a expedita minus odit dolore reiciendis ab non!
                Odio, debitis illum! Velit maxime possimus unde veritatis esse, inventore debitis error ratione voluptates laborum eligendi facere omnis ullam delectus! Quas dolorum rem quod accusamus cupiditate, praesentium sequi corrupti id.
                Illum atque natus, accusantium dolores repudiandae autem quia quo dolorum a optio qui, porro vitae corrupti omnis inventore esse soluta in, nam minima. Hic ipsa exercitationem porro assumenda soluta sunt.
                Blanditiis culpa voluptates id sunt eveniet quo nemo. Repudiandae eius vero tenetur rem explicabo dolorum mollitia saepe nemo reprehenderit numquam, modi ex veniam ad ut. Ut excepturi quo sit asperiores!
                Dolore sint cum non labore tempora voluptate magnam possimus illo adipisci aliquam, ad aspernatur aut inventore, est odit nulla et suscipit aperiam modi officia velit omnis quae. Quis, neque harum.
                Rem et incidunt praesentium maxime rerum iste provident ipsam cum dolores veritatis eligendi cupiditate iusto, repellat eius facilis reprehenderit voluptatem quae quo! Voluptas, tempore nostrum ea accusantium sint dolores assumenda.
                Totam omnis non fugit! Maxime, at quibusdam labore in error aspernatur fuga adipisci sed delectus harum, totam deleniti dolores repellendus? Officia debitis repudiandae ullam eius dolor sit excepturi consequatur eaque.
                Veritatis esse deleniti optio adipisci sapiente provident dignissimos laborum suscipit fuga quam ea autem tempora voluptatum, laboriosam id earum illo maiores, nihil corrupti! Nisi consequuntur, fuga sed atque sapiente earum?
                Cupiditate suscipit unde corrupti earum laboriosam quia, ad debitis nam, architecto omnis laborum. Esse dolor aliquam error est assumenda porro eum cumque fugit doloremque. Magni mollitia numquam repellat animi perspiciatis.
              </div>
            </div>
          </div>
        </div>
      </div></section>
    </main>
    <footer class="site__footer">Footer</footer>
  </div>
</body>

</html>

【讨论】：

IE10 确实不支持flex-direction:column; 属性。不过我只需要对 IE11 的支持。在 IE11 中，您的示例似乎运行良好。我也尝试了您的解决方案，但这破坏了页脚应始终位于页面底部的结构。（见prntscr.com/lwet7h）
我在之前的项目中使用了 ´position:absolute;` 解决方案。这里的问题是页眉和页脚的高度可以是动态的。（例如，移动版本上的标头较小）。我之前使用jQuery 来动态计算高度（如果它发生变化）。开始使用Bootstrap4&flexbox，想用更轻量级的方式，跳过javascript的使用