web-dev-qa-db-fra.com

div avec min-hauteur dynamique basée sur la hauteur de la fenêtre du navigateur

J'ai trois éléments div: un en-tête, un en pied de page et un contenu central div.
le div au centre doit se développer automatiquement avec le contenu, mais je voudrais un min-height de telle sorte que le bas div atteigne toujours au moins le bas de la fenêtre, mais n'y est pas fixé sur les pages plus longues.

Par exemple:

<div id="a" style="height: 200px;">
  <p>This div should always remain at the top of the page content and should scroll with it.</p>
</div>
<div id="b">
  <p>This is the div in question. On longer pages, this div needs to behave normally (i.e. expand to fit the content and scroll with the entire page). On shorter pages, this div needs to expand beyond its content to a height such that div c will reach the bottom of the viewport, regardless of monitor resolution or window size.
</div>
<div id="c" style="height: 100px;">
  <p>This div needs to remain at the bottom of the page's content, and scroll with it on longer pages, but on shorter pages, needs to reach the bottom of the browser window, regardless of monitor resolution or window size.</p>
</div>
viewportcss
32
Bryan

Cherchez juste mon solution sur jsfiddle , il est basé sur csslayout

html,
body {
  margin: 0;
  padding: 0;
  height: 100%; /* needed for container min-height */
}
div#container {
  position: relative; /* needed for footer positioning*/
  height: auto !important; /* real browsers */
  min-height: 100%; /* real browsers */
}
div#header {
  padding: 1em;
  background: #efe;
}
div#content {
  /* padding:1em 1em 5em; *//* bottom padding for footer */
}
div#footer {
  position: absolute;
  width: 100%;
  bottom: 0; /* stick to bottom */
  background: #ddd;
}
<div id="container">

  <div id="header">header</div>

  <div id="content">
    content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
  </div>

  <div id="footer">
    footer
  </div>
</div>
26
huston007

J'ai trouvé cette courtoisie de ryanfait.com . C'est en fait remarquablement simple.

Afin de faire flotter un pied de page vers le bas de la page lorsque le contenu est plus court que la hauteur de la fenêtre, ou en bas du contenu lorsqu'il est plus long que la hauteur de la fenêtre, utilisez le code suivant:

Structure HTML de base:

<div id="content">
  Place your content here.
  <div id="Push"></div>
</div>
<div id="footer">
  Place your footer information here.
</footer>

Remarque: Rien ne doit être placé en dehors des divs '#content' et '#footer' à moins qu'il ne soit absolument positionné.
Remarque: Rien ne doit être placé à l'intérieur du div '#Push' car il sera caché.

Et le CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto !important; /*min-height hack*/
  height: 100%;            /*min-height hack*/
  margin-bottom: -4em;     /*Negates #Push on longer pages*/
}
#footer, #Push {
  height: 4em;
}

Pour que les en-têtes ou les pieds de page s'étendent sur la largeur d'une page, vous devez absolument positionner l'en-tête.
Remarque: Si vous ajoutez un en-tête de largeur de page, j'ai trouvé nécessaire d'ajouter un div wrapper supplémentaire à #content. Le div extérieur contrôle l'espacement horizontal tandis que le div intérieur contrôle l'espacement vertical. J'étais obligé de le faire parce que j'ai trouvé que 'min-height:' ne fonctionne que sur le corps d'un élément et ajoute un rembourrage à la hauteur.

* Modifier: point-virgule manquant

20
Bryan

Si #top Et #bottom Ont des hauteurs fixes, vous pouvez utiliser:

#top {
    position: absolute;
    top: 0;
    height: 200px;
}
#bottom {
    position: absolute;
    bottom: 0;
    height: 100px;
}
#central {
    margin-top: 200px;
    margin-bot: 100px;
}

mise à jour

Si vous souhaitez que #central S'étire, vous pouvez:

  • Faux-le avec un arrière-plan sur le parent;
  • Utilisez CSS3 (pas largement supporté, très probablement) calc();
  • Ou peut-être utiliser javascript pour ajouter dynamiquement min-height.

Avec calc():

#central {
    min-height: calc(100% - 300px);
}

Avec jQuery, cela pourrait être quelque chose comme:

$(document).ready(function() {
  var desiredHeight = $("body").height() - $("top").height() - $("bot").height();
  $("#central").css("min-height", desiredHeight );
});
9
ANeves

Aucun hack ou js nécessaire. Appliquez simplement la règle suivante à votre élément racine:

min-height: 100%;
height: auto;

Il choisira automatiquement le plus grand des deux comme hauteur, ce qui signifie que si le contenu est plus long que le navigateur, ce sera la hauteur du contenu, sinon, la hauteur du navigateur. C'est le CSS standard.

2
streaver91

Comme mentionné ailleurs, la fonction CSS calc () peut très bien fonctionner ici. Il est désormais principalement pris en charge. Vous pouvez utiliser comme:

.container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 300px);
    min-height: -moz-calc(100% - 300px);
    min-height: calc(100% - 300px);
}
2
Jahmic

Vous devrez probablement écrire du JavaScript, car il n'y a aucun moyen d'estimer la hauteur de tous les utilisateurs de la page.

0
Merianos Nikos

C'est difficile de faire ça.

Il y a un min-height: style CSS, mais il ne fonctionne pas dans tous les navigateurs. Vous pouvez l'utiliser, mais le plus gros problème est que vous devrez le définir sur quelque chose comme 90% ou des nombres comme ça (pourcentages), mais les divs du haut et du bas utilisent des tailles de pixels fixes, et vous ne pourrez pas concilier leur.

 var minHeight = $(window).height() -
                 $('#a').outerHeight(true) -
                 $('#c').outerHeight(true));

if($('#b').height() < minHeight) $('#b').height(minHeight);

Je sais que a et c ont des hauteurs fixes, mais je les mesure plutôt au cas où elles changeraient plus tard.

De plus, je mesure la hauteur de b (je ne veux pas faire est plus petit après tout), mais s'il y a une image là-dedans qui n'a pas chargé la hauteur peut changer, alors faites attention aux choses comme ça.

Il peut être plus sûr de faire:

$('#b').prepend('<div style="float: left; width: 1px; height: ' + minHeight + 'px;">&nbsp;</div>');

Ce qui ajoute simplement un élément dans ce div avec la bonne hauteur - qui agit effectivement comme une hauteur minimale même pour les navigateurs qui ne l'ont pas. (Vous voudrez peut-être ajouter l'élément dans votre balisage, puis contrôler simplement la hauteur de celui-ci via javascript au lieu de l'ajouter également de cette façon, de cette façon, vous pouvez le prendre en compte lors de la conception de la mise en page.)

0
Ariel