Faire du contenu HTML élargir pour remplir la fenêtre

Question

J'ai une page HTML divisée verticalement en

• En-tête
• Body
• Pied de page

Le corps est à son tour divisée horizontalement en

• Un grand DIV sur la gauche entouré par des barres de défilement, l'affichage d'une partie d'un diagramme
• Un formulaire à droite

L'en-tête et pied de page sont à hauteur fixe. Le corps devrait étendre verticalement pour remplir la partie de la fenêtre non occupée par l'en-tête et pied de page.

De même, la forme est de largeur fixe et le volet de défilement devrait étendre horizontalement pour remplir la largeur de la fenêtre.

Le diagramme est très grande (jusqu'à 10x10-écrans) je ne peux pas afficher tout cela. Au lieu de cela, je veux montrer autant que possible (en utilisant toute la fenêtre) afin que l'utilisateur a besoin de faire défiler le moins possible.

Je ne peux pas utiliser javascript, parce que certains utilisateurs ne sont pas nécessairement paranoïaque et doit le désactiver.

Quelques options que j'ai pris en compte:

• Une table avec la largeur de la cellule de panneau de défilement et de hauteur fixé à 100% et toutes les autres à 1%
  ne fonctionne pas. Le tableau (et donc la page) Développe pour contenir le diagramme entier, même avec le positionnement absolu sur le volet de défilement DIV.
• Positionnement absolu pour compenser le volet du bas de la page par la hauteur du pied de page
  Works mais il est inexact: la hauteur du pied de page dépend de la taille de police et si le texte est enveloppé. Cela signifie que je dois laisser une grande marge pour assurer qu'ils ne se chevauchent pas.
• Placez le schéma dans un IFRAME
  La meilleure solution que j'ai trouvé avec les scripts désactivés, mais limite ce que je peux faire dans les scripts quand ils sont activé.

Je remarque que Google Maps utilise une zone de taille fixe pour la carte lorsque les scripts sont désactivés. Si Google a renoncé à ce problème que cela signifie qu'il est impossible?

Answer 1

Utilisation de la hauteur. 100% attribut CSS doit faire fonctionner

Voir si Dave Woods 100% Mise en hauteur à l'aide CSS fonctionne pour vous .

Answer 2

Il est un aspect peu connu de la propriété CSS position: absolute; qui vous donnera la disposition que vous recherchez. Vous pouvez placer tout à fait un élément dans les 4 directions, haut, à droite, en bas et à gauche. Cela signifie une boîte peut être aussi fluide que le navigateur et rester toujours à la même distance des bords de celui-ci est conteneur que vous spécifiez.

div {
    position: absolute;
}
#main {
    top: 8em; // 8em
    left: 0; 
    bottom: 8em; // 8em
    right: 300px;
    overflow: auto;
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 8em;
}
#sidebar {
    top: 8em;
    right: 0;
    bottom: 8em;
    width: 300px;
    overflow: auto;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 8em;
}

Pour vérifier un exemple http://www.sanchothefat.com/dev/ mises en page / cssframes.html puis voir la source et le CSS séparer pour voir comment il est fait dans un exemple plus complexe.

Si vous prenez cette approche, vous devez positionner absolument tous les <div>s principaux de conteneurs. Utilisez ems si la taille de la police est une préoccupation.

PS. Il y a une chasse aux sorcières dans ce IE6 bousille (choc!) Mais l'exemple que je vous ai fourni a un fallback IE6. Juste une hauteur fixe sera bien si.