écran - hauteur css




Faire un div remplir la hauteur de l'espace écran restant (20)

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 se trouve à l'intérieur de la div de contenu, définissez top: 0; le mettra juste sous l'en-tête. Parfois, le contenu sera une table réelle, avec une hauteur de 100%. Mettre l'en- header dans le content ne permettra pas que cela fonctionne.

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

Mettre à jour:

Les éléments à l'intérieur du contenu div auront également des hauteurs définies en pourcentages. Donc quelque chose à 100% à l'intérieur de la div va le remplir vers le bas. 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% dans #content occupera 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.


Avertissement: La réponse acceptée donne l'idée de la solution, mais je la trouve un peu gonflée avec un emballage inutile et des règles CSS. Voici une solution avec très peu de règles CSS.

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

La solution ci-dessus utilise les unités http://caniuse.com/#feat=flexbox et http://caniuse.com/#feat=flexbox , et est donc IE10 +, à condition que vous http://caniuse.com/#feat=flexbox l'ancienne syntaxe pour IE10.

Codepen pour jouer avec: link to codepen

Ou celui-ci, pour ceux qui ont besoin que le conteneur principal soit défilable en cas de contenu débordant: lien vers codepen


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

Lorsque vous voulez que l'élément central s'étende verticalement sur toute la page, vous pouvez utiliser calc() qui est introduit dans CSS3.

En supposant que nous avons un en- header et un footer hauteur fixe , nous voulons que l'étiquette de section prenne toute la hauteur verticale disponible ...

Demo

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, c'est d'additionner la hauteur des éléments et de la déduire à 100% utilisant la fonction calc() .

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


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 ( caniuse )

Juste pour être complet, voici les éléments Html équivalents aux propriétés css pour 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 } 

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


Cela pourrait être fait purement CSS 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


Essaye ça

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

Il y a une tonne de réponses maintenant, mais j'ai trouvé l'utilisation de la hauteur: 100vh; travailler sur l'élément div qui doit remplir tout l'espace vertical disponible.

De cette façon, je n'ai pas besoin de jouer avec l'affichage ou le positionnement. Cela est très pratique lorsque vous utilisez Bootstrap pour faire un tableau de bord dans lequel j'ai eu une barre latérale et une principale. Je voulais que le principal s'étire et remplisse tout l'espace vertical pour que je puisse appliquer une couleur de fond.

div {
    height: 100vh;
}

Supporte IE9 et plus: cliquez pour voir le lien


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 avez encore plus de chance 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 la nouvelle mise en page Flexible Box en CSS3!


J'ai lutté avec cela pendant un moment et a fini par ce qui suit:

Comme il est facile de rendre le contenu DIV de la même hauteur que le parent mais apparemment difficile de faire la hauteur parent moins la hauteur de l'en-tête j'ai décidé de faire du contenu div toute hauteur mais de le positionner absolument dans le coin supérieur gauche pour le haut qui a la hauteur de l'en-tête. De cette façon, le contenu s'affiche parfaitement sous l'en-tête et remplit tout l'espace restant:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

J'ai trouvé une solution assez simple, car pour moi, c'était juste un problème de conception. Je voulais que le reste de la page ne soit pas blanc sous le pied rouge. Donc, j'ai mis la couleur de fond des pages au rouge. Et le contenu de l'arrière-plan au blanc. Avec la hauteur du contenu définie par exemple. 20em ou 50% une page presque vide ne laissera pas toute la page rouge.


Pour l'application mobile, j'utilise uniquement VH et VW

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

Démo - https://jsfiddle.net/u763ck92/


Pourquoi pas comme ça?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

Vous donner une hauteur et html et corps (dans cet ordre) et juste donner une hauteur à vos éléments?

Travaille pour moi


Si vous ne pouvez pas gérer les anciens navigateurs (c'est-à-dire MSIE 9 ou plus anciens), vous pouvez le faire avec http://caniuse.com/#feat=flexbox qui est déjà W3C CR. Ce module permet également d'autres astuces, telles que la réorganisation du contenu.

Malheureusement, MSIE 9 ou moins ne supporte pas cela et vous devez utiliser le préfixe du fournisseur pour la propriété CSS pour tous les navigateurs autres que Firefox. J'espère que d'autres fournisseurs abandonneront bientôt le préfixe.

Un autre choix serait CSS Grid Layout, mais qui a encore moins de soutien à partir des versions stables des navigateurs. En pratique, seul MSIE 10 le supporte.



Vincent, je vais répondre à nouveau en utilisant vos nouvelles exigences. Puisque vous ne vous souciez pas du contenu caché s'il est trop long, vous n'avez pas besoin de faire flotter l'en-tête. Il suffit de mettre le débordement caché sur les balises html et body, et de définir la hauteur #content à 100%. Le contenu sera toujours plus long que la fenêtre par la hauteur de l'en-tête, mais il sera masqué et ne provoquera pas de barres de défilement.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

Vous pouvez réellement utiliser display: table pour diviser la zone en deux éléments (en-tête et contenu), où l'en-tête peut varier en hauteur et le contenu remplit l'espace restant. Cela fonctionne avec toute la page, ainsi que lorsque la zone est simplement le contenu d'un autre élément positionné avec une position relative , absolute ou fixed . Cela fonctionnera tant que l'élément parent aura une hauteur non nulle.

Voir ce violon et aussi le code ci-dessous:

CSS:

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

CSS3 Simple Way

height: calc(100% - 10px); // 10px is height of your first div...

tous les principaux navigateurs de nos jours le soutiennent, alors allez-y si vous n'avez pas besoin de soutenir les navigateurs vintage.



it never worked for me in other way then with use of the JavaScript as NICCAI suggested in the very first answer. I am using that approach to rescale the <div> with the Google Maps.

Voici l'exemple complet comment faire cela (fonctionne dans Safari / FireFox / IE / iPhone / Andorid (fonctionne avec rotation)):

CSS

body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.header {
  height: 100px;
  background-color: red;
}

.content {
  height: 100%;
  background-color: green;
}

JS

function resize() {
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;
}

window.onload = resize;
window.onresize = resize;

HTML

<body>
  <div class="header" id="headerId">Hello</div>
  <div class="content" id="contentId"></div>
</body>

 style="height:100vh"

résolu le problème pour moi. Dans mon cas, j'ai appliqué cela à la div requis





html-table