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

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

Pour 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 au 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 couvrent 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 wrapper div supplémentaire à # content . Le div externe contrôle l'espacement horizontal tandis que le div interne contrôle l'espacement vertical. J'ai été 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.

*Edit: point-virgule manquant

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;
}

Mettre à jour

Si vous voulez que #central s'étire, vous pouvez:

• faux avec un fond sur parent;
• utilisez les CSS3 (pas largement pris en charge, 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 );
});

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.

Comme mentionné ailleurs, la fonction CSS calc () peut bien fonctionner ici. Il est maintenant 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);
}

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

C'est difficile de faire ça.

Il existe un style css min-height:, mais cela ne fonctionne pas dans tous les navigateurs. Vous pouvez l'utiliser, mais le plus gros problème est que vous devrez le définir à quelque chose comme 90% ou des nombres comme ça (pourcentages), mais les divs haut et bas utilisent des tailles de pixels fixes, et vous ne serez pas en mesure de les réconcilier.

 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.

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

Il peut être plus sûr de faire:

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

Qui ajoute simplement un élément dans cette div avec la hauteur correcte-qui agit efficacement comme min-height même pour les navigateurs qui ne l'ont pas. (Vous pouvez ajouter l'élément dans votre balisage, puis en contrôler la hauteur via javascript au lieu de l'ajouter de cette façon, de cette façon vous pouvez le prendre en compte lors de la conception de la mise en page.)