web-dev-qa-db-fra.com

Comment remplir 100% de la hauteur restante?

+--------------------+
|                    |
|                    |
|                    |
|                    |
|         1          |
|                    |
|                    |
|                    |
|                    |
+--------------------+
|                    |
|                    |
|                    |
|                    |
|         2          |
|                    |
|                    |
|                    |
|                    |
+--------------------+

Le contenu de (1) présenté ci-dessus est inconnu, car il peut augmenter ou diminuer le nombre de pages générées dynamiquement. La deuxième div (2), comme indiqué ci-dessus, devrait remplir l’espace restant.

voici un exemple de mon HTML

<div id="full">
<!--contents of 1 -->
<div id="someid">
<!--contents of 2 -->
</div>
</div>

css ...

#full{width: 300px; background-color: red;}
#someid{height: 100%;}

Ou cette méthode est-elle fausse? Comment dois-je faire cela? s'il vous plaît voir mondémoet montrez-moi mon erreur.

htmlcssheightfill
68
Bhojendra Rauniyar

Vous devriez pouvoir le faire si vous ajoutez un div (#header ci-dessous) pour envelopper le contenu de 1.

  1. Si vous flottez #header, le contenu de #someid sera forcé de circuler autour de lui.

  2. Ensuite, vous définissez la largeur de #header sur 100%. Cela le fera s’étendre pour remplir la largeur du div contenant, #full. Cela aura pour effet de pousser tout le contenu de #someid en dessous de #header puisqu'il n'y a plus de place pour la circulation sur les côtés.

  3. Enfin, définissez la hauteur de #someid sur 100%, cela lui donnera la même hauteur que #full.

JSFiddle

HTML

<div id="full">
    <div id="header">Contents of 1</div>
    <div id="someid">Contents of 2</div>
</div>

CSS

html, body, #full, #someid {
  height: 100%;
}

#header {
  float: left;
  width: 100%;
}

Mettre à jour

Je pense qu'il convient de mentionner que la flexbox est bien prise en charge sur les navigateurs modernes d'aujourd'hui. Le code CSS pourrait être modifié si #full devenait un conteneur flex, et #someid devrait définir sa croissance à une valeur supérieure à 0.

html, body, #full {
  height: 100%;
}

#full {
  display: flex;
  flex-direction: column;
}

#someid {
  flex-grow: 1;
}
55
thgaskell

Pour obtenir une hauteur div à 100% sur une page, vous devez également définir chaque objet de la hiérarchie au-dessus de la division sur 100%. par exemple:

html { height:100%; }
body { height:100%; }
#full { height: 100%; }
#someid { height: 100%; }

Bien que je ne comprenne pas bien votre question, je suppose que c'est ce que vous voulez dire.

Voici l'exemple sur lequel je travaille:

<html style="height:100%">
    <body style="height:100%">
        <div style="height:100%; width: 300px;">
            <div style="height:100%; background:blue;">

            </div>
        </div>
    </body>
</html>

Style est juste un remplacement du CSS que je n'ai pas externalisé.

8
Serdalis

Cela peut être fait avec des tables:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr height="0%"><td>
        <div id="full">
            <!--contents of 1 -->
        </div>
    </td></tr>
    <tr><td>
        <div id="someid">
            <!--contents of 2 -->
        </div>
    </td></tr>
</table>

Ensuite, appliquez css pour que certains remplissent l’espace restant:

#someid {
    height: 100%;
}

Maintenant, je peux simplement entendre les cris de colère de la foule: "Oh non, il utilise des tables! Donnez-lui à manger aux lions!" S'il vous plaît écoutez-moi.

Contrairement à la réponse acceptée qui ne fait rien d'autre que de faire en sorte que le conteneur divise toute la hauteur de la page, cette solution permet à la div # 2 de remplir l'espace restant comme demandé dans la question. Si vous avez besoin de cette seconde division pour remplir toute la hauteur qui lui est attribuée, c’est actuellement le seul moyen de le faire.

Mais n'hésitez pas à me prouver le contraire, bien sûr! CSS est toujours meilleur.

5
Jonathan Graef

    html,
    body {
        height: 100%;
    }

    .parent {
        display: flex;
        flex-flow:column;
        height: 100%;
        background: white;
    }

    .child-top {
        flex: 0 1 auto;
        background: pink;
    }

    .child-bottom {
        flex: 1 1 auto;
        background: green;
    }
    <div class="parent">
        <div class="child-top">
          This child has just a bit of content
        </div>
        <div class="child-bottom">
          And this one fills the rest
        </div>
    </div>

4
Ernesto Hegi

Je sais qu’il s’agit d’une entrée tardive, mais même en 2016, je suis surpris par l’absence totale de support de IE pour flex (actuellement, 11 est le seul à le prendre en charge et son principal buggy à ce sujet est également le cas. http: // caniuse .com/# feat = flexbox ) qui, du point de vue commercial, n’est pas fantastique! Donc, je pense que, jusqu'à ce que IE ferme la meilleure solution et que la solution la plus conviviale pour tous les navigateurs doit être une solution JS/Jquery?

La plupart des sites utilisent déjà Jquery et un exemple très simple (pour mon code) est:

$('#auto_height_item').height($(window).height() - $('#header').height());

Vous pouvez évidemment remplacer la fenêtre et l'en-tête et laisser les calculs de base effectuer le travail. Personnellement, je ne suis toujours pas convaincu de la flexibilité ...

1
Ukuser32

J'ai ajouté ceci pour les pages trop courtes.

html:

<section id="secondary-foot"></section>

css:

section#secondary-foot {
    height: 100%;
    background-color: #000000;
    position: fixed;
    width: 100%;
}
0
user4533280

Créez un div qui contient les deux divs (full et someid) et définissez la hauteur de ce div comme suit:

hauteur: 100vh;

La hauteur des divs contenant (full et someid) devrait être réglée sur "auto" . C'est tout.

0
H.A.

Je sais que c’est une vieille question, mais de nos jours, il existe un formulaire très facile à utiliser, CCS Grid. Permettez-moi donc de citer les divs à titre d’exemple:

<div id="full">
  <div id="header">Contents of 1</div>
  <div id="someid">Contents of 2</div>
</div>

puis le code CSS:

.full{
  width:/*the width you need*/;
  height:/*the height you need*/;
  display:grid;
  grid-template-rows: minmax(100px,auto) 1fr;
 }

Et ça y est, la deuxième ligne, scilicet, le quelque part, prendra le reste de la hauteur en raison de la propriété 1fr, et la première div aura un minimum de 100px et un maximum de tout ce dont elle a besoin.

Je dois dire que CSS a beaucoup progressé pour faciliter la vie des programmeurs.

0
Juan Joya