Question Faire un div remplir la hauteur de l'espace écran restant


Je travaille actuellement sur une application web, où je veux que le contenu remplisse la hauteur de tout l'écran.

La page contient un en-tête contenant un logo et des informations sur le compte. Cela pourrait être une hauteur arbitraire. Je veux que le contenu div remplisse le reste de la page vers le bas.

J'ai un en-tête div et un contenu div. En ce moment j'utilise une table pour la mise en page comme ceci:

CSS et HTML

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

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

La hauteur totale de la page est remplie et aucun défilement n'est requis.

Pour tout ce qui est à l'intérieur du contenu div, réglage top: 0; le mettra juste sous l'en-tête. Parfois, le contenu sera une table réelle, avec une hauteur de 100%. En mettant header à l'intérieur content ne permettra pas que cela fonctionne.

Existe-t-il un moyen d'obtenir le même effet sans utiliser le table?

Mettre à jour:

Éléments à l'intérieur du contenu div les hauteurs seront également définies en pourcentages. Donc, quelque chose à 100% à l'intérieur du div va le remplir au fond. Comme le feront deux éléments à 50%.

Mise à jour 2:

Par exemple, si l'en-tête occupe 20% de la hauteur de l'écran, une table spécifiée à 50% à l'intérieur #content prendrait 40% de l'espace de l'écran. Jusqu'à présent, l'emballage de la chose entière dans une table est la seule chose qui fonctionne.


1332
2017-09-18 05:06


origine


Réponses:


Mise à jour 2015: l'approche flexbox

Il y a deux autres réponses qui mentionnent brièvement flexbox; cependant, c'était il y a plus de deux ans, et ils ne fournissent aucun exemple. La spécification pour flexbox a définitivement réglé maintenant.

Remarque: Bien que la spécification CSS Flexible Boxes Layout soit à l'étape de la recommandation du candidat, tous les navigateurs ne l'ont pas implémenté. L'implémentation de WebKit doit être préfixée avec -webkit-; Internet Explorer implémente une ancienne version de la spécification, préfixée par -ms-; Opera 12.10 implémente la dernière version de la spécification, non préfixée. Voir la table de compatibilité sur chaque propriété pour un statut de compatibilité à jour.

(pris à partir de https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

Tous les principaux navigateurs et IE11 + supportent Flexbox. Pour IE 10 ou plus, vous pouvez utiliser le shim FlexieJS.

Pour vérifier le support actuel, vous pouvez également voir ici: http://caniuse.com/#feat=flexbox

Exemple de travail

Avec flexbox, vous pouvez facilement basculer entre l'une de vos lignes ou colonnes, soit avec des dimensions fixes, des dimensions de contenu ou des dimensions d'espace restant. Dans mon exemple, j'ai placé l'en-tête sur son contenu (comme dans la question OPs), j'ai ajouté un pied de page pour montrer comment ajouter une région à hauteur fixe et ensuite définir la zone de contenu pour remplir l'espace restant.

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

Dans le CSS ci-dessus, le fléchir propriété sténographie le flex-grow, flex-shrink, et flex-base propriétés pour établir la flexibilité des éléments flexibles. Mozilla a un bonne introduction au modèle des boîtes flexibles.


663
2017-07-27 08:14



Il n'y a vraiment pas de son, cross-browser moyen de le faire en CSS. En supposant que votre mise en page a des complexités, vous devez utiliser JavaScript pour définir la hauteur de l'élément. L'essentiel de ce que vous devez faire est:

Element Height = Viewport height - element.offset.top - desired bottom margin

Une fois que vous pouvez obtenir cette valeur et définir la hauteur de l'élément, vous devez attacher des gestionnaires d'événements à la fois à onload et onresize afin que vous puissiez utiliser votre fonction de redimensionnement.

En outre, en supposant que votre contenu puisse être plus grand que la fenêtre d'affichage, vous devrez définir overflow-y pour faire défiler.


207
2017-09-18 08:16



Le message original est il y a plus de 3 ans. Je suppose que beaucoup de gens qui viennent à ce poste comme moi sont à la recherche d'une solution de mise en page semblable à une application, disons un en-tête fixe, un pied de page et un contenu pleine hauteur occupant l'écran de repos. Si oui, ce message peut aider, il fonctionne sur IE7 +, etc.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Et voici quelques extraits de ce post:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>


153
2017-10-21 15:02



Au lieu d'utiliser des tables dans le balisage, vous pouvez utiliser des tables CSS.

Balisage

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(Pertinent) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 et FIDDLE2

Certains avantages de cette méthode sont:

1) Moins de balisage

2) Le balisage est plus sémantique que les tables, car il ne s'agit pas de données tabulaires.

3) Le support du navigateur est très bon: IE8 +, Tous les navigateurs modernes et les appareils mobiles (puis-je utiliser)


Juste pour l'exhaustivité, voici les éléments Html équivalents à css propriétés pour le Le modèle de table CSS

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

134
2018-06-06 11:20



Approche CSS seulement (si la hauteur est connue / fixée)

Lorsque vous voulez que l'élément du milieu couvre toute la page verticalement, vous pouvez utiliser calc() qui est introduit dans CSS3.

En supposant que nous avons un hauteur fixe  header et footer éléments et nous voulons le section tag pour prendre toute la hauteur verticale disponible ...

Démo

Balisage supposé

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Donc, votre CSS devrait être

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}

section {
    height: calc(100% - (100px + 150px)); 
    /* Adding 100px of header and 150px of footer */

    background: tomato;
}

footer {
    height: 150px;
    background-color: blue;
}

Donc, ici, ce que je fais est, en additionnant la hauteur des éléments et en déduisant de 100% en utilisant calc() fonction.

Assurez-vous simplement que vous utilisez height: 100%; pour les éléments parents.


76
2018-04-27 12:05



Utilisé: height: calc(100vh - 110px);

code:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  
<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>


37
2018-05-22 03:20



Il pourrait être fait purement par CSS en utilisant vh:

#page 
{
  display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent 
{
  float:left; width:100%; display:block;
}
#content 
{      
float:left; width:100%; height:100%; display:block; overflow:scroll;
}

et le HTML

<div id="page">
   <div id="tdcontent">
   </div>
   <div id="content">
   </div>
</div>

Je l'ai vérifié, il fonctionne dans tous les principaux navigateurs: Chrome, IE, et FireFox


24
2017-09-14 21:09



Aucune des solutions affichées ne fonctionne lorsque vous avez besoin de la div du bas pour faire défiler lorsque le contenu est trop grand. Voici une solution qui fonctionne dans ce cas:

HTML:

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.container {
  width: 400px;
  height: 300px;
}
.header {
  background: cyan;
}
.body {
  background: yellow;
  height: 100%;
}
.body-content-outer-wrapper {
  height: 100%;
}
.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}
.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Source d'origine: Remplissage de la hauteur restante d'un conteneur lors de la gestion du débordement dans CSS

JSFiddle aperçu en direct


22
2018-02-20 17:12



J'ai cherché une réponse pour cela aussi. Si vous êtes assez chanceux pour pouvoir cibler IE8 et plus, vous pouvez utiliser display:table et les valeurs associées pour obtenir les règles de rendu des tables avec des éléments de niveau bloc, y compris div.

Si vous êtes encore plus chanceux et que vos utilisateurs utilisent des navigateurs de niveau supérieur (par exemple, s'il s'agit d'une application intranet sur des ordinateurs que vous contrôlez, comme mon dernier projet), vous pouvez utiliser le nouveau Disposition flexible de la boîte en CSS3!


21
2018-04-11 15:48



Ce qui a fonctionné pour moi (avec un div dans un autre div et je suppose dans toutes les autres circonstances) est de définir le rembourrage du bas à 100%. C'est-à-dire, ajoutez ceci à votre css / stylesheet:

padding-bottom: 100%;

20
2017-10-17 14:00



Une solution simple, en utilisant flexbox:

<div>header</div>
<div class="content"></div>

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

Exemple de codepen

Une solution alternative, avec un div centré dans le contenu div


19
2018-02-27 18:21