css position pour cent

J'ai un problème avec la position de divs par rapport à un autre div.

Je veux faire une div qui est en position horizontale dans le milieu de l'écran et dans ce div je veux mettre 3 autres div avec la même hauteur. Mais tous se doivent de répondre.

Une image en dit plus que des mots 🙂

<div id="zwrapper">
 <div id="z1" class="row"></div>
 <div id="z2" class="row"></div>
 <div id="z3" class="row"></div>
</div>

Le blu élément est le HTML

html{
  background: steelblue;
  height: 100%;
  width: 100%;
  top:0; left:0; bottom: 0; right:0;
}

La chaux une ist que div (#zwrapper) où je veux ajouter les trois rouges divs.

#zwrapper{
  height: 81%;
  top: 10%;
  width: 100%;
  left: 0;
  position: absolute;
  background: lime;
}

Le rouge divs créer des problèmes. Tous les divs, d'une hauteur de 30%. Le premier devrait être aligné en haut, et la troisième vers le bas. Le milieu de la div avec l'id #z2 est le seul à obtenir une marge de 5%.

.row{
  position: relative;
  width: 80%;
  background: red;
  height: 30%;
 }
 #z2{
  margin: 5% 0;
 }

Mon idée était de mettre les 3 divs avec une hauteur de 30% dans le wrapper et donner le moyen d'une marge (haut /bas) de 5% si je reçois une hauteur de 100%.
Mais cela ne fonctionne pas.

Si je redimensionner la fenêtre en largeur, la hauteur du rouge divs changements mais je n'ai pas modifier la hauteur.

Je fais du violon pour le démontrer. http://jsfiddle.net/ELPJM/

Merci d'avance

vous souhaitez faire défiler après le redimensionnement de la largeur de la fenêtre ? vous devriez vos requêtes de média.

OriginalL'auteur Hansinger | 2013-08-20

css position

12

Le problème est que les valeurs en pourcentage dans margin sont toujours par rapport à la largeur, pas la hauteur. Vous pouvez atteindre cet objectif en utilisant le positionnement absolu au lieu de cela, et la fixation d'un "top" de la valeur sur chaque ligne. Comme ceci:
```
.row {
    position: absolute;
    width: 80%;
    background: red;
    height: 30%;
}

#z1 {
    top: 0%;
}

#z2 {
    top: 35%;
}

#z3 {
    top: 70%;
}
```
http://jsfiddle.net/ELPJM/8/

pas exactement ce que je cherchais, mais il fonctionne et ne pas réagir à un changement de largeur. MERCI!!
très beau...! 🙂
Que faire si la condition de l'utilisation relative seulement ! pourquoi absolue, il provoque concept totalement différent
cette réponse a été d'il y a plusieurs années. aujourd'hui, je voudrais suggérer à l'aide de flexbox. Google, mais il permet à proprement spécifier le comportement exact sans utiliser des hacks comme ça.
Sa va se planter toute façon, le meilleur et le meilleur, si les images d'arrière-plan. faire mieux et centrée sur le test de trop

OriginalL'auteur Ben Lee
2

C'est votre margin: 5% 0; qui rend le changement de la hauteur. Je ne suis pas sûr de ce que la marge en haut et en bas de mesures de son pourcentage de mais ses pas de la même chose que le parent de l'élément en hauteur.
Par conséquent, vous ne pouvez pas l'utiliser pour compter vers 100% de la hauteur.

essayez plutôt ceci:
```
<div id="zwrapper">
    <div id="z1" class="row"></div>
    <div class="spacing"></div>
    <div id="z2" class="row"></div>
    <div class="spacing"></div>
    <div id="z3" class="row"></div>
</div>
```
avec le style:
```
.spacing{ height: 5%; }
```
fonctionne bien, merci! mais l'autre avec position: absolute est plus simple dans la mise en œuvre
Bien sûr! pourquoi ne pas je pense que, c'est une bien meilleure solution. mais bon, maintenant vous savez où la hauteur de la différence vient 🙂
oui, la description de la raison a été très utile pour l'avenir 🙂

OriginalL'auteur Razz

-1

HTML

<div id="zwrapper">
    <div class="holder">
        <div id="z1" class="row"></div>
        <div id="z2" class="row"></div>
        <div id="z3" class="row"></div>
    </div>
</div>

CSS

html,body{height: 100%;}
#zwrapper{min-height: 100%;}
#zwrapper:after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 1px;
}
#zwrapper.holder{
    display: inline-block;
    vertical-align: middle;
}

OriginalL'auteur Anon

-2

Cela devrait résoudre
```
.row{
    position: relative;
    width: 80%;
    margin:0 auto;
    background: red;
    height: 30%;
}
#z2{
    margin: 5% auto;
}
```
veuillez fournir un commentaire si vous downvote
Je n'ai pas downvote, mais je pense que downvote était parce que cela ne fonctionne tout simplement pas. jsfiddle.net/ELPJM/9
je n'ai pas downvote,trop. mais auto comme deuxième valeur est à mon humble avis la div centré dans le milieu.. et encore réagit à un changement de largeur
sens 🙂

OriginalL'auteur AdityaSaxena

Vous devez vous connecter pour publier un commentaire.