Question

我正在制作一个包含内容会话的简单页面，该会话将跨越其容器的所有高度，以便可以制作整页的Web。但是，我需要制作

内容的容器（div.inner）的绝对位置为display: flex; flex-flow: column; min-height: 100%;
带有div.content的内容会话（flex-grow: 1;）

使其整页显示。（我需要使内容的容器处于绝对位置，以实现进一步的淡化内容切换效果）

这是我的实现代码，我想知道为什么它仅在Chrome而不是IE11中可以工作。我可以知道是否有任何解决方法吗？

谢谢。

    html, body {
      height: 100vh;
    }

    .outer {
      position: relative;
      height: 100%;
    }

    .inner {
      display: flex;
      flex-flow: column;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      min-height: 100%;
      background-color: lightgreen;
    }

    .no-span-content-upper {
      background-color: lightpink;
    }

    .span-content {
      flex-grow: 1;
      background-color: lightblue;
    }

    .no-span-content-lower {
      background-color: lightyellow;
    }

    <html>
      <head></head>
      <body>
        <div class="outer">
          <div class="inner">
            <div class="no-span-content-upper">
              some dummy content without specific height
            </div>
            <div class="span-content">
              span content here
            </div>
            <div class="no-span-content-lower">
              some dummy content without specific height
            </div>
          </div>
        </div>
      </body>
    </html>

Answer 1

~~如果您还设置了齿缝bottom:0;，则效果很好~~，但显然不适用于您的情况....

html, body {
      height: 100vh;
      margin:0;
    }

    .outer {
      position: relative;
      height: 100%;
    }

    .inner {
      display: flex;
      flex-flow: column;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom:0;
      min-height: 100%;
      background-color: lightgreen;
    }

    .no-span-content-upper {
      background-color: lightpink;
    }

    .span-content {
      flex-grow: 1;
      background-color: lightblue;
    }

    .no-span-content-lower {
      background-color: lightyellow;
    }

<html>
      <head></head>
      <body>
        <div class="outer">
          <div class="inner">
            <div class="no-span-content-upper">
              some dummy content without specific height
            </div>
            <div class="span-content">
              span content here
            </div>
            <div class="no-span-content-lower">
              some dummy content without specific height
            </div>
          </div>
        </div>
      </body>
    </html>

height或min-height:100% / vh + flex-flow : column;的解决方案要求父级也设置为100％，并且flex列才能在IE中工作，这是它的错误之一（如果有人想查找副本）。为了避免这种情况，您将需要一个额外的包装器，通常涉及的两个包装器分别为html和body，但是这里由于absolute : position的原因，使该元素脱离了流程，您需要添加一个额外的包装作为绝对包装。 ;）

html,
body,
.outer-buffer {
  height: 100vh;
  margin: 0;
}

.outer {
  height: 100%;
  display: flex;
  flex-flow: column;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.inner {
  display: flex;
  flex-flow: column;
  flex: 1;
  min-height: 100%;
  background-color: lightgreen;
}

.no-span-content-upper {
  background-color: lightpink;
}

.span-content {
  flex-grow: 1;
  background-color: lightblue;
}

.span-content div:hover {
  height: 200vh;
}

.no-span-content-lower {
  background-color: lightyellow;
}

<html>

<head></head>

<body>
  <div class="outer-buffer">
    <div class="outer">
      <div class="inner">
        <div class="no-span-content-upper">
          some dummy content without specific height
        </div>
        <div class="span-content">
          span content here<br>
          <div>hover me to over flow container</div>
        </div>
        <div class="no-span-content-lower">
          some dummy content without specific height
        </div>
      </div>

    </div>
  </div>
</body>

</html>

IE元素的高度不能超过其绝对定位的flex容器的最小高度

1 个答案: