Question

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

所有功能都可以在所有主流浏览器上使用，但是我在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中，没有其他浏览器）

Answer 1

只需删除您的 display:flex 类的flex-direction:column和site__container属性。因为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>

大图打破了Flexbox“页脚始终在底部”的结构

1 个答案: