web-dev-qa-db-fra.com

CSS div 100% hauteur

Je développe ce site Web et je veux que la barre latérale droite ait une hauteur de 100%.

body { 
    height: 100%; 
    min-height: 100%;
    position: relative;
}

mydiv { 
    height: 100%; 
    min-height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0;
    width: 290px;
}

J'ai lu beaucoup de réponses, en particulier ceci (réponse Prestaul): Réglage de la hauteur à 100% sur un élément en position absolue lorsque le contenu dépasse la taille de la fenêtre .

Mais pour moi cette astuce ne marche pas, l'exemple du violon ne marche pas!

Ceci est l'exemple de travail jsfiddle.

Ceci est le même code qui ne fonctionne pas.

cssheightcss-position
22
T1T

essayez de définir le style de corps à:

body { position:relative;}

ça a fonctionné pour moi

5
J Max

Définissez la balise html également. De cette façon, aucun piratage de position étrange n'est requis.

html, body {height: 100%}

41
MildlySerious

Solution Flexbox

Remarque: Ajoutez des préfixes de fournisseur flex si requis par vos navigateurs pris en charge .

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
}

.Content {
  flex-grow: 1;
}

.Sidebar {
  width: 290px;
  flex-shrink: 0;
}
<div class="Content" style="background:#bed">Content</div>
<div class="Sidebar" style="background:#8cc">Sidebar</div>

1
Reggie Pinkham

J'ai une autre suggestion. Si vous voulez que myDiv ait une hauteur de 100%, utilisez ces 3 attributs supplémentaires sur votre div:

myDiv {
    min-height: 100%;
    overflow-y: hidden;
    position: relative;
}

Cela devrait faire le travail!

0
Lars Ljungvist