div avec la dynamique min-hauteur en fonction de la hauteur de la fenêtre du navigateur

Il suffit de regarder pour mon solution sur jsfiddle, il est basé sur csslayout

CSS:

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

HTML:

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

Si #top et #bottom ont 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 voulez #central pour étirer vers le bas, vous pouvez:

• Faux avec un arrière-plan sur les parents;
• Utiliser CSS3 (et non de largement pris en charge, le plus probable) calc();
• Ou peut-être utiliser javascript pour ajouter dynamiquement des min-height.

Avec calc():

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

Avec jQuery il pourrait être quelque chose comme:

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

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

Il est difficile de le faire.

Il y a un min-height: de style css, mais ça ne fonctionne pas dans tous les navigateurs. Vous pouvez l'utiliser, mais le plus gros problème, c'est que vous aurez besoin de mettre quelque chose comme 90% ou des chiffres comme ça (en pourcentage), mais le haut et le bas de la vrd utiliser des tailles de pixel, et vous ne serez pas en mesure de les concilier.

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

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

Je sais a et c ont hauteurs fixes, mais je plutôt de mesurer dans le cas où ils changer plus tard.

Aussi, je suis à la mesure de la hauteur de b (je ne veux pas faire est de taille après tout), mais si il y a une image qui n'a pas la charge de la hauteur peut changer, donc attention à des choses comme ça.

Il peut être plus sûr de le faire:

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

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