Высота элемента IE не может охватывать его гибкий контейнер с минимальной высотой - PullRequest
Новая
       14

Высота элемента IE не может охватывать его гибкий контейнер с минимальной высотой

0 голосов
/ 05 июля 2019

Я делаю простую страницу с сеансом контента, который будет охватывать всю высоту его контейнера, чтобы я мог создать полноразмерную сеть.Однако мне нужно сделать

  1. контейнер контента (div.inner) с абсолютным позиционированием с display: flex; flex-flow: column; min-height: 100%;
  2. сеанс контента (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>

1 Ответ

1 голос
/ 05 июля 2019

Если вы также задаете координаты 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% и гибкий столбец для работы в IE, это одна из его ошибок (если кто-то хочет искать дублировать). Чтобы избежать этого, вам понадобится дополнительная обертка, обычно используются 2 обертки 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>
...