La zone de contenu CSS de notre site défile alors qu'elle ne devrait pas - HTML, CSS, en-tête, pied de page

Ok, le problème est que j’ai un en-tête, un pied de page etla div content content et ce que je veux, c'est que la div content remplisse automatiquement la hauteur du navigateur entre l'en-tête et le pied de page, de sorte que le pied de page reste en bas de la page ou en dessous de la longueur du contenu.

quand tu vas à incard.com.au vous pouvez voir le problème sur la page d'index car la zone de contenu est plus petite que la fenêtre du navigateur. Nous avons donc ajouté une hauteur à la div pour résoudre le problème de flottement du pied de page.

Je l'ai corrigé en utilisant jquery

$("#sitewidth").css({"height":(($(document).height())-320)+"px"});
$("#contentbody").css({"height":(($(document).height())-320)+"px"});

Réponses:

Supprimer la "hauteur minimale: 700px" de #contentbody

Alors, qu'est-ce qui est supposé se passer lorsque la fenêtre du navigateur est plus petite que la hauteur de la div?

Vous pouvez régler la hauteur de la div centrale à 100pour cent. Par exemple, divisez le contenu à 100%, fixez les hauteurs inférieure et supérieure fixes. C'est un peu un bidouillage, mais ça marche parfois, je pense - les 100% ne compresseront pas la hauteur fixe en haut et en bas - il "essaie" d'être à 100%.

Ce que je ne sais pas, c'est ce qui est supposése produire lorsque vous réduisez la fenêtre du navigateur. L'en-tête et le pied de page sont-ils supposés rester collés en haut et en bas de votre navigateur, tandis que la zone de contenu devient de plus en plus petite?

Le seul problème que je vois est que les bordures orange de chaque côté de votre zone de contenu s’arrêtent à mi-chemin de la page lorsque le contenu n’atteint pas le pied de page.

Le moyen le plus courant de résoudre ce problème consiste à transformer les bordures oranges en image d’arrière-plan et à les répéter à l’intérieur de .sitewidth

J'ai pu réparer la solution en utilisantJavascript, il semble que pour obtenir la hauteur du contenu qui s’adapte à l’ensemble de l’écran, j’ai dû faire un calcul qui me priverait de la hauteur du pied de page et de l’en-tête de la taille de l’écran du navigateur, ce qui me donnerait la taille minimale de mon corps de contenu. comme il diffère selon la taille de l'écran de chaque utilisateur, il doit s'agir d'une fonction de définition javascript.