web-dev-qa-db-fra.com

Hauteur relative div

Je souhaite diviser la vue en quatre parties . Un en-tête en haut de la page, en largeur et hauteur fixe . Le reste de la page est divisé en deux blocs de même hauteur, le haut de ceux-ci contient deux blocs de même taille l'un à côté de l'autre.

Ce que j'ai essayé est (sans l'en-tête):

<div id="wrap">
    <div id="block12">
        <div id="block1"></div>
        <div id="block2"></div>
        <div class="clear"></div>
    </div>
    <div id="block3"></div>
</div>

Et le CSS:

#wrap {
    width: 100%;
    height: 100%;
}

#block12 {
    width: 100%;
    max-height: 49%;
}

    #block1, #block2 {
        width: 50%;
        height: 100%;
        float: left;
        overflow-y: scroll;
    }


#block3 {
    width: 100%;
    height: 49%;
    overflow: auto;
    /*background: blue;*/
}

.clear { clear: both; }

Apparemment, utiliser un pourcentage pour la hauteur ne fonctionnera pas de cette façon. Pourquoi est-ce si?

htmlcssheightrelative
12
Explicat

ajouter ceci à vous CSS:

html, body
{
    height: 100%;
}

travail Fiddle

quand vous dites à wrap d'être 100%, 100% de quoi? de son parent (corps), de sorte que son parent doit avoir une certaine hauteur.

et il en va de même pour body, son parent son html. html parent sa fenêtre d'affichage .. Ainsi, en les définissant tous les deux à 100%, wrap peut également avoir une hauteur en pourcentage.

aussi: les éléments ont une marge/marge de remplissage par défaut, ce qui les fait s'étendre sur un peu plus que la hauteur que vous leur avez appliquée. (provoquant une barre de défilement) vous pouvez utiliser

*
{
    padding: 0;
    margin: 0;
}

pour désactiver cela.

Regardez Que Fiddle

20
avrahamcool

Lorsque vous définissez un pourcentage de hauteur sur un élément dont les éléments parents n'ont pas de hauteur définie, les éléments parents ont une valeur par défaut.

height: auto;

Vous demandez au navigateur de calculer une hauteur à partir d'une valeur non définie. Comme cela équivaudrait à une valeur nulle, le navigateur Web ne fait rien avec la hauteur d’éléments enfants.

Outre l'utilisation d'une solution JavaScript, vous pouvez utiliser cette méthode extrêmement simple:

#parent3 {
    display: table;
    width: 100%;
}

#parent3 .between {
    display: table-row;
}

#parent3 .child {
    display: table-cell;
}

Aperçu sur http://jsbin.com/IkEqAfi/1

  • Exemple 1: ne fonctionne pas
  • Exemple 2: hauteur fixe
  • Exemple 3: méthode de la table

Mais: Bien sûr, la méthode de la table ne fonctionne correctement que dans tous les navigateurs modernes et dans Internet Explorer 8 et versions ultérieures. En tant que repli, vous pouvez utiliser JavaScript.

5
Sven

ajoutez ceci à votre css:

html, body{height: 100%}

et changez la hauteur maximale de #block12 en height

Explication :

#wrap correspondait à 100% de la hauteur (mesure relative), mais lorsque vous utilisez des mesures relatives, il recherche la mesure de son élément parent. Il est normalement non défini car il est également relatif. Les seuls éléments pouvant utiliser des hauteurs relatives sont body et ou html eux-mêmes, en fonction du navigateur, les autres éléments ont besoin d'un élément parent de hauteur absolue.

Mais attention, il est délicat de jouer avec les hauteurs relatives, vous devez calculer correctement la hauteur de votre en-tête afin de pouvoir le soustraire aux pourcentages des autres éléments.

3
aleation

Le pourcentage en largeur fonctionne, mais le pourcentage en hauteur ne fonctionnera pas si vous ne spécifiez pas une hauteur spécifique pour l'un des parents de la boucle dépendante ...

Voir ceci: le pourcentage en hauteur ne fonctionne pas?

2
Sachin

Le div prend la hauteur de son parent, mais comme il n'a pas de contenu (expecpt pour vos divs), sa hauteur sera égale à celle du contenu.

Vous devez définir la hauteur du corps et du code HTML:

HTML:

<div class="block12">
    <div class="block1">1</div>
    <div class="block2">2</div>
</div>
<div class="block3">3</div>

CSS:

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.block12 {
    width: 100%;
    height: 50%;
    background: yellow;
    overflow: auto;
}
.block1, .block2 {
    width: 50%;
    height: 100%;
    display: inline-block;
    margin-right: -4px;
    background: lightgreen;
}
.block2 { background: lightgray }
.block3 {
    width: 100%;
    height: 50%;
    background: lightblue;
}

Et un JSFiddle

0
LinkinTED

Fondamentalement, le problème réside dans block12. pour que le bloc1/2 occupe toute la hauteur du bloc12, il doit avoir une hauteur définie. Ce poste de débordement de pile explique cela en détail. 

Donc, définir une hauteur définie pour block12 vous permettra de définir une hauteur correcte. J'ai créé un exemple sur JSfiddle qui vous montrera que les blocs peuvent être placés les uns à côté des autres si block12 div est réglé sur une hauteur standard sur toute la page. 

Voici un exemple incluant un en-tête et une div en block3 avec du contenu, par exemple.

#header{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:20%;
    }

    #block12{
    position:absolute;
    top:20%;
    width:100%;
    left:0;
    height:40%;
    }
    #block1,#block2{
    float:left;
    overflow-y: scroll;
    text-align:center;
    color:red;
    width:50%;
    height:100%;

    }
 #clear{clear:both;}
 #block3{
    position:absolute;
    bottom:0;
    color:blue;
    height:40%;

    }
0
ajfstuart