web-dev-qa-db-fra.com

Internet Explorer n'honore pas ma hauteur minimale: 100% avec flexbox

J'ai examiné toutes les solutions min-height: 100% des solutions sur StackOverflow et sur le Web et je n'arrive pas à en trouver une qui réponde à mes besoins (relativement simples).

Voici ce que je veux:

  1. J'ai un conteneur à deux colonnes, et les deux colonnes devraient s'étirer pour avoir la même hauteur.
  2. Lorsque le contenu ne remplit pas l'écran, les colonnes doivent s'étendre sur toute la hauteur de la fenêtre.
  3. Je suis heureux d'utiliser flex-box, mais je préférerais ne pas utiliser les piratages JS si possible.

Exemple de code:

http://codepen.io/anon/pen/dwgDq?editors=110

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="nav">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
        <p>Item 4</p>
        <p>Item 5</p>
      </div>
      <div class="content">
        <p>Content 1</p>
        <p>Content 2</p>
        <p>Content 3</p>
        <p>Content 4</p>
        <p>Content 5</p>
        <p>Content 6</p>
        <p>Content 7</p>
        <p>Content 8</p>
      </div>
    </div>
  </body>
</html>

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

.wrapper {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.container {
  display: flex;
  align-items: stretch;
  min-height: 100%;
}

.nav {
  background: grey;
  width: 200px;
}

.content {
  flex-grow: 1;
  background: yellow;
}

Cela fonctionne parfaitement dans Safari et Chrome.

Il semble que IE (v11 dans mon cas) ne respecte pas ma hauteur minimale et que, par conséquent, les colonnes ne remplissent pas la hauteur de l'écran. D'après ce que j'ai lu, IE6 + 7 avait des problèmes avec le traitement de la hauteur en min-height, mais il s'agit d'une relique du passé, révolue depuis longtemps, lors de l'utilisation d'un doctype HTML5.

Comment faire IE honorer mon min-height?

Comment puis-je faire cette mise en page?

htmlcsshtml5internet-explorerheight
16
Brent Traut

Voici le correctif:

HTML

<body>
  <header>Header</header>
  <main>Here comes the content ...</main>
  <footer>Footer</footer>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header, footer {
  flex-shrink: 0;
}
main {
  flex: 1 0 auto;
}

jsfiddle: http://jsfiddle.net/d5syw3dc/

18
Thomas

Il existe une autre solution à ce problème.

Dans votre cas, vous pouvez utiliser un pseudo-élément pour étirer une ligne:

Tout d’abord, utilisez 100vh au lieu de 100% 

.container {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

Après cela, ajoutez simplement pseudo élément à .container avec exactement même hauteur valeur

.container::after{
  content: '';
  height: 100vh;
  visibility: hidden;
}

Ici, voir mon codepen http://codepen.io/anon/pen/LVazgQ

5
Xopoc

min-height ne fonctionne pas dans IE10/11 lorsqu'il est associé à une structure flexible (consultez le rapport bug ). Utilisez un autre conteneur flexible pour le réparer.

Edit:Je viens juste de comprendre que je ne répondais pas au message d'origine, induit en erreur par la réponse votée. Alors, on y va:

Disposition en deux colonnes

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="sidebar"></div>
        <div id="content"></div>
    </div>
</div>

CSS

.ie-fixMinHeight{
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
}

#content {
    flex-grow:1;
}

N'utilisez pas la mise en page flexbox directement sur body car des éléments insérés via des plugins jQuery (saisie semi-automatique, popup, etc.) seraient bloqués.

Ici, la mise en page fixed en fonction de votre code.

Pied collant

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

Voir une démo working .

1
BeliG

Faire en sorte que les enfants de votre élément display: flex héritent de min-height était une solution rapide pour moi sur IE, sans aucun élément supplémentaire. Cela fonctionne également comme prévu avec le débordement.

HTML:

<div class="container">
  <div class="col-1">Col 1</div>
  <div class="col-2">Col 2</div>
</div>

CSS:

body {
  margin: 0;
  min-height: 100vh;
}

.container {
  min-height: inherit; /* or 100vh or whatever you want */
  display: flex;
}
.container > * {
  min-height: inherit; /* use the full height of the container, works with overflow */
}

.col-1 {
  background: red;
  flex-grow: 1; /* half the screen width */
}
.col-2 {
  background: blue;
  flex-grow: 1; /* half the screen width */
}
1
dudasaus

EDIT: La réponse de Thomas montre un moyen de réaliser ce que je voulais sans utiliser min-height, ce qui signifie que cela fonctionne très bien sous IE.

J'ai fini par résoudre ce problème avec Javascript, même si je reconnais que c'est un code absolument désagréable et une jolie solution dépendante de l'implémentation. Lorsque la taille de mon élément de contenu principal change de taille, je désactive la propriété height, mesure le conteneur pour déterminer si la propriété height est réellement nécessaire, puis le remplace si nécessaire. C'est comme si j'avais écrit ma propre implémentation de min-height. Un inconvénient majeur de cette approche est que IE ne donne pas les événements appropriés lorsque la taille des éléments change ou lorsque le contenu d'un élément change, et sans ces événements, vous devez utiliser un minuteur setInterval et mesurer vous-même l'élément . Brut.

En plus de ma propre solution, j'ai parlé avec les membres de l'équipe IE qui travaillent sur flexbox. Ils ont reconnu que le bogue existait toujours dans la production actuelle, mais ils m'ont tout de même invité à trouver un moyen de le réparer sans JS. L’une des pistes qu’ils m’avaient données consistait à utiliser la disposition spécifique à IE -ms-grid . Je ne les connais pas bien, mais je vais faire rapport et mettre à jour cette réponse si j'ai le temps d'enquêter.

0
Brent Traut