3
votes

Comment positionner les éléments sur toute la hauteur de l'écran tout en évitant un positionnement absolu?

J'ai un conteneur div avec deux sous-conteneurs. Le div parent doit avoir une hauteur totale (du haut vers le bas de l'écran). Le premier sous-conteneur doit toujours être au centre gauche de ce conteneur parent. Le deuxième sous-conteneur doit toujours se trouver en bas à droite de ce conteneur parent.

Tout d'abord j'ai essayé de le résoudre en utilisant des positions absolues

<div id="parent">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    <div>this is always on the right bottom of the screen</div>
  </div>
</div>

html,
body {
  height: 100%;
}

#parent {
  height: 100%;
  display: flex;
}

#first {
  align-self: center;
}

#second {
  align-self: flex-end;
  display: flex;
  justify-content: flex-end;
}

J'ai pensé éviter les positions absolues. Y a-t-il un moyen d'utiliser flexbox / grid pour cela? J'ai commencé avec ça

<div>
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    this is always on the right bottom of the screen
  </div>
</div>

html,
body {
  height: 100%;
}

#first {
  position: absolute;
  top: 50%;
}

#second {
  position: absolute;
  bottom: 0;
  right: 0;
}

comme vous pouvez le voir, le premier sous-conteneur semble aller bien. Le second est au fond du récipient qui a l'air bien. Mais le contenu n'est pas dans le coin inférieur droit (vous devrez peut-être cliquer sur "Pleine page" pour le voir). Est-ce que quelqu'un sait comment y remédier? Peut-être que cet extrait peut être simplifié?

html css

0 commentaires

4 Réponses :

1
votes

Vous pouvez utiliser la grid pour afficher 2 colonnes et align-self: self-end pour pousser la deuxième colonne vers le bas.

<div id="parent">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    <div>this is always on the right bottom of the screen</div>
  </div>
</div>

html,
body {
  height: 100%;
}

#parent {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

#second {
  align-self: self-end;
  text-align: right;
}

3 commentaires

désolé mais cela ne résout pas mon problème. le deuxième conteneur n'est pas en bas à droite

Bien. c'est le cas .. i.stack.imgur.com/cJ6YX.png

Je l'ai compris, vous voulez dire qu'il devrait également être aligné .. J'ai mis à jour la réponse (même si j'ai vu que vous avez déjà accepté une réponse)

1
votes

Le deuxième div n'a pas besoin de définir la flexion de l'affichage. Il suffit de définir la marge gauche: auto; cela devrait fonctionner car div est un bloc d'affichage par défaut.

<div id="parent">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    <div>this is always on the right bottom of the screen</div>
  </div>
</div>

html,
body {
  height: 100%;
}

#parent {
  height: 100%;
  display: flex;
}

#first {
  align-self: center;
}

#second {
  align-self: flex-end;
  margin-left:auto;
  white-space: nowrap;
}

0 commentaires

1
votes

Si je comprends bien votre problème, vous devez définir ces règles sur les balises html, body :

<div id="container">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    this is always on the right bottom of the screen
  </div>
</div>

Et le conteneur parent a une height: 100% . J'ai donné deux solutions avec positionnement absolute et flexbox .

html,
body {
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
  height: 100%;
}

#first {
  margin-top: auto;
  margin-bottom: auto;
}

#second {
  margin-top: auto;
  margin-left: auto;
}

<div id="container">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    this is always on the right bottom of the screen
  </div>
</div>

Solution avec flex et margin :

html, body {
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#first {
  position: absolute;
  top: 50%;
}

#second {
  position: absolute;
  bottom: 0;
  right: 0;
}

html, body {
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

0 commentaires

0
votes

Note latérale: n'utilisez pas d' IDs pour le style.
Explication du code:
100vw et 100vh pour le wrapper parent pour lui donner toute la largeur et la hauteur.
align-items: center long de l' display: flex pour centrer verticalement tous les enfants (principalement, notre enfant au left-center )
Pour l'enfant en right-bottom , on lui donne une position absolute avec right: 0 et bottom: 0 pour le coller dans le coin (N'oubliez pas la position: relative à son parent pour éviter de se chevaucher si vous avez d'autres éléments sur la page )
Voici un extrait de travail ðŸ '‡
<div class="parent">
  <div class="left-center"></div>
  <div class="right-bottom"></div>
</div>
* {
  margin: 0;
  padding: 0;
}

.parent {
  position: relative;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: #e9e9e9;
}

.left-center {
  width: 150px;
  height: 100px;
  background: #333;
}

.right-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 150px;
  height: 100px;
  background: #c1c1c1;
}

1 commentaires

Merci pour votre réponse. Mais ma question était de savoir s'il existe un moyen d'éviter les styles absolus