Faire un div remplir la hauteur du reste de l'espace à l'écran

Question

Je suis actuellement en train de travailler sur une application web, où je veux que le contenu de remplir la hauteur de la totalité de l'écran.

La page comporte un en-tête, qui contient un logo, et les informations de compte. Cela pourrait être un arbitraire de hauteur. Je veux que le contenu de la div pour remplir le reste de la page vers le bas.

J'ai un en-tête de div et une teneur en div. Pour le moment je suis en utilisant un tableau pour la mise en page comme ceci:

CSS:

#page {
  height: 100%; width: 100%
}
#tdcontent {
  height: 100%;
}
#content {
  overflow: auto; /* or overflow: hidden; */
}

HTML:

<table id="page">
  <tr><td id="tdheader">
    <div id="header">...</div>
  </td></tr>
  <tr><td id="tdcontent">
    <div id="content">...</div>
  </td>
</table>

La totalité de la hauteur de la page est remplie, et pas de défilement est nécessaire.

Pour quoi que ce soit à l'intérieur de la div du contenu, paramètre top: 0; vont le mettre juste en dessous de l'en-tête. Parfois, le contenu sera une vraie table, avec sa hauteur de 100%. Mettre header à l'intérieur d' content ne permettra pas que cela fonctionne.

Est-il possible d'obtenir le même effet sans l'aide de l' table?

Mise à jour:

Éléments à l'intérieur du contenu div auront des hauteurs en pourcentages. Donc, quelque chose à 100% à l'intérieur de l' div va le remplir vers le bas. Lorsque deux éléments à 50%.

Mise à jour 2:

Par exemple, si l'en-tête prend en hausse de 20% de hauteur de l'écran, une table spécifiée à 50% à l'intérieur d' #content pourrait prendre jusqu'à 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.

Answer 1

une approche flexbox

Je me rends compte il y a déjà une réponse en évoquant brièvement flexbox, mais qui a été plus de deux ans, et ne pas fournir des exemples. Le cahier des charges pour flexbox a définitivement réglé maintenant, même s'il doit être mentionné:

Remarque: Si CSS Flexible Disposition des Boites de spécification est au Candidat à la Recommandation de la scène, tous les navigateurs ont mis en œuvre. WebKit mise en œuvre doit être avec le préfixe -webkit-; Internet Explorer met en œuvre une ancienne version de la spécification, avec le préfixe -ms-; Opera 12.10 met en œuvre la dernière version de la spécification, unprefixed. Voir le tableau de compatibilité sur chaque propriété pour une mise à jour de compatibilité de l'état.

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

un exemple de travail

En dépit de ladite note, il semble que flexbox est assez fiable sur l'ensemble des navigateurs modernes — aussi longtemps que vous gardez les choses simples, utiliser des fournisseurs de préfixes, et sont heureux avec seulement supporter la version 11 d'Internet Explorer. Vous avez toujours la possibilité de mettre en œuvre un JS de mise en valeur qui aurait coup de pied dans les anciennes versions d'IE, si vous le souhaitait.

Avec flexbox, vous pouvez facilement basculer entre vos lignes ou des colonnes ayant fixé les dimensions, le contenu de la taille des dimensions ou de la fin des dimensions de l'espace. Dans mon exemple, j'ai la tête à se caler sur son contenu (conformément à l'OPs question), j'ai ajouté un pied de page à montrer comment ajouter un fixe-hauteur de la région, puis de définir la zone de contenu pour remplir l'espace restant.

http://jsfiddle.net/9JKjt/

BALISAGE

(Évidemment, vous pourriez faire usage de balises HTML5 header, footer et section)

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

CSS

(Les extensions ne sont pas nécessaires et ne serviront qu'à ajouter un visuel de remplissage)

.box {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  -o-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  -o-align-items: stretch;
  align-items: stretch;
  height: 400px;
}

.box .row {
  border: 1px dotted grey;
  -webkit-flex: 0 1 30px;
  -moz-flex: 0 1 30px;
  -ms-flex: 0 1 30px;
  -o-flex: 0 1 30px;
  flex: 0 1 30px;
  min-width: 0;
  min-height: auto;
}

.box .row span {
  display: block;
  padding: 8px;
}

.box .row.header {
  -webkit-flex: 0 1 auto;
  -moz-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  -o-flex: 0 1 auto;
  flex: 0 1 auto;
}

.box .row.content {
  -webkit-flex: 1 1 auto;
  -moz-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  -o-flex: 1 1 auto;
  flex: 1 1 auto;
}

.box .row.footer {
  -webkit-flex: 0 1 40px;
  -moz-flex: 0 1 40px;
  -ms-flex: 0 1 40px;
  -o-flex: 0 1 40px;
  flex: 0 1 40px;
}

Answer 2

Il n'y a vraiment pas un bruit, de la croix-navigateur de façon à le faire en CSS. En supposant que votre mise en page a complexités, vous avez besoin d'utiliser le JavaScript pour définir l'élément de la hauteur. L'essence de ce que vous devez faire est de:

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

Une fois que vous pouvez obtenir cette valeur et de définir l'élément de la hauteur, vous devez joindre les gestionnaires d'événements à la fois de la fenêtre onload et onresize de sorte que vous pouvez tirer votre fonction de redimensionnement.

Aussi, en supposant que votre contenu peut être plus grande que la fenêtre d'affichage, vous aurez besoin de mettre overflow-y pour faire défiler.

Answer 3

Le post original est de plus de 3 ans. Et je pense que beaucoup de gens qui viennent à ce post comme moi sont à la recherche d'une application-comme la mise en page de la solution, dire d'une certaine manière fixe en-tête, pied de page, et toute la hauteur du contenu en prenant le reste de l'écran. Si oui, ce post 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 poste,

<!doctype html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
    /* 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; }
    </style>
</head>
<body>
    <div class="header row">
        <h2>My header</h2>
    </div> 
    <div class="body row scroll-y">
        <p>The body</p>
    </div> 
    <div class="footer row">
        My footer
    </div>
</body>
</html>

Answer 4

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

Balisage

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

(Pertinent) le 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 des tableaux, parce que ce n'est pas des données tabulaires.

3) prise en charge du Navigateur est très bonne: IE8+, Tous les navigateurs et les appareils mobiles (caniuse)

---

Juste pour être complet, voici l'équivalent des éléments Html propriétés css pour le CSS modèle de table

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 } 

Answer 5

CSS Approche

Lorsque vous souhaitez que le milieu de l'élément de manière à s'étendre sur toute la page à la verticale, vous pouvez utiliser calc() qui est introduit en CSS3.

En supposant que nous avons une hauteur fixe header et footer - éléments et nous voulons l' section balise de prendre toute disposition de la hauteur...

Démo

Supposé balisage

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

Si 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, que suis en train de faire est, en ajoutant jusqu'à la hauteur des éléments et de la déduction à partir d' 100% l'aide calc() fonction.

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