web-dev-qa-db-fra.com

Angular 2 hauteur de montage flexible 100%

Application angulaire utilisant Material design et flex-layout . https://github.com/angular/flex-layout

J'essaie de créer une mise en page simple de 2 colonnes en haut (gauche = remplir, droite = 10%), suivie d'une seule ligne en bas de l'écran. Les éléments ne remplissent toujours que l'espace vertical requis pour le contenu. La seule façon que j'ai trouvée de faire cela est de régler manuellement la hauteur à 100%. Est-ce comme ça que je dois le faire? Quel est le problème avec ce code HTML?

<div fxLayout="column">
  <div fxLayout="row" fxFlex="90%">
    <div fxFlex="80%" class="border">
      <p>Stuff is happening here</p>
    </div>
    <div fxFlex="20%" class="border">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  </div>
  <div fxLayout="row" fxFlex="10%" class="border">
    <p>Bottom element</p>
  </div>
</div>

Résultat:

 enter image description here

angularflexboxmaterial-design
10
Ryan Langton

Définir la hauteur à 100% est probablement le chemin à parcourir .. La hauteur est dynamique, elle s'adapte donc à votre contenu. Dans votre cas, le contenu ne remplit pas la page, il s'agit donc d'un comportement normal.

Quel est le problème avec cette solution cependant?

5
Alexandre Couret

Je viens de trébucher sur cette question car j'avais un problème similaire et je l'ai résolu d'une manière plus cohérente en utilisant l'attribut fxFlexFill de la bibliothèque FlexLayout, sans ajuster manuellement les propriétés CSS . Dans votre cas spécifique, j'inclurais l'attribut fxFlexFill dans le premier élément div comme suit:

<div fxLayout="column" fxFlexFill>
    ...
</div>

J'espère que cela aide . Massi

2
Massimiliano Porrini