html - 大图像破坏了 flexbox "footer always at bottom"结构-6ren

html - 大图像破坏了 flexbox "footer always at bottom"结构

转载作者：太空宇宙更新时间：2023-11-04 06:40:38

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

在所有主要浏览器中一切正常，但我在 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，其他浏览器没有)

最佳答案

只需为您的 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>

关于html - 大图像破坏了 flexbox "footer always at bottom"结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53828960/

文章推荐： python - 结束 while 循环

文章推荐： Java:来自其他类的 boolean 值未更改值/if 语句不起作用

文章推荐： c - 将 *next 列表指针设置为 NULL

文章推荐： html - 内容溢出 : auto height to tall for header div

canvas - 破坏 Canvas
我正在尝试完成撤消/重做。我正在使用loadFromJSON(...)从我存储在数组中的 Canvas 状态重新构建 Canvas 。基本上，我的想法是破坏现有的 Canvas 并重新构建 Canva
JavaScript iframe 破坏
在某些情况下，我有一个在 iframe 中打开的网页。当它被加载到那个 iframe 中时，我需要它将窗口位置设置为资源以下载文件(所有这些都是为了更新 GreaseMonkey 脚本......所有
android - 破坏 Intent ？
当我创建 Intent 时: Intent in = new Intent(this, myclass.class); this.startActivity(in); 我创建了一个新的 Intent
php - 破坏 Wordpress 网站的简码
我正在我本地版本的 Wordpress 网站上为 Wordpress 创建新的短代码。在 functions.php 中，我添加了例如: function shortTest() { re
javascript - 破坏 JavaScript 代码的特殊字符
我正在为机械网站制作 JavaScript 闪卡游戏。因为我想将方程写在卡片上，所以我需要使用 delta(Δ) 符号。一张卡片可能有:一侧是“功率方程”，另一侧是“P=W/Δt”。如果卡片从第一面
javascript - addClass 破坏 JS
我编写了以下代码: document.addEventListener("DOMContentLoaded", ()=>{ let menu = document.querySelector(
javascript - 破坏 Chrome 缓存以进行浏览器同步重新加载
我的浏览器同步工作正常，但我仍然很难处理之前的 html 的缓存。即使选中了 Chrome 的“禁用缓存”，甚至在隐身模式下也是如此! 要加载页面更改，我总是必须“清除缓存并硬重新加载”。我想知道，
extjs - 破坏 ExtJS 中的上下文菜单？
我注意到每次打开和关闭(通过单击菜单项或单击菜单外的某个区域)时，上下文菜单 ( Ext.menu.Menu ) s 不会从 DOM 中删除，它们只是以某种方式变得不可见。如何改变这个？最佳答案
coq - 破坏 coq 中依赖记录的相等性
给定依赖记录类型: Record FinPath : Type := mkPath { fp_head : S i; fp_tail
teamcity - 破坏 Teamcity 中构建的电子邮件用户
在 Husdon/Jenkins 中，我可以在构建被破坏时设置通知，以向进行破坏构建的 checkin 的用户发送电子邮件。如何在 Teamcity 中执行此操作？我知道个人用户可以通过 Teamc
extjs - 破坏 ExtJS 中的上下文菜单？
我注意到每次打开和关闭(通过单击菜单项或单击菜单外的某个区域)时，上下文菜单 ( Ext.menu.Menu ) s 不会从 DOM 中删除，它们只是以某种方式变得不可见。如何改变这个？最佳答案
django html2text anchor 破坏
使用 MIMEMultipart('alternative') 发送 html 和 pain-text 时将 html 转换为文本时，html 的 anchor 换行 http://127.0.0.
java - 破坏 Activity 导致服务丢失数据
每当我的应用程序最小化时，我都会启动一个服务，该服务向我的 HTTP 服务器发送拉取请求以检查通知，当应用程序恢复时，服务将被终止(以及计划的可运行项)。一切正常，直到我决定终止该应用程序(将其从正在
jQuery Mobile 破坏 OmniAuth
我意识到该框架处于 alpha 阶段，但正在实现 jQuery Mobile破坏了我的omniauth 身份验证。当我尝试登录时，一旦我尝试点击/auth/twitter Controller ，jQ
jquery 破坏 Angular 指令
我对 Angular 比较陌生，经过几个小时的调试，我发现添加 jquery 时存在一些不兼容性。该指令在没有 jquery 的情况下工作正常，但在使用 jquery 时会中断:/ 这是一个 plnk
JQuery .trigger ('submit' )破坏
我发现，因为我正在处理的所有表单都有一个包含“name =“submit””属性的提交按钮，所以当我单击应该触发表单提交的链接时，触发器提交会中断. 有谁知道我该如何解决这个问题。下面的 JQuer
Javascript 破坏 CSS 悬停
我遇到了一个问题:/我得到了一个 CSS 东西，它使悬停时背景位置发生变化。但是当我在 javascript 中运行一个改变悬停的函数后，CSS 停止工作。这是函数: function tree()
javascript - qooxdoo 破坏，处置
谁能给出一个完整的例子来说明 qooxdoo 1.6 中的 dispose 和 destruct 是如何工作的？，我在 qooxdoo 演示或文档中找不到任何好的示例。谢谢你的建议。最佳答案处
java - JFormattedTextField 破坏 DocumentFilter
我对 JFormattedTextField 有疑问(我将它用作我们所有文本字段的基类)。今天我尝试向该字段的文档添加一个文档过滤器，它工作得很好，但前提是它没有设置格式化程序工厂。问题是，当设置
javascript - 破坏 JavaScript 函数
我有一个点击事件 $('#ship_Move').click(function (event) { event.stopPropagation();

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 大图像破坏了 flexbox "footer always at bottom"结构