Comment puis-je forcer le rendu d'une page de page Web à une résolution minimale, quelle que soit la taille de la fenêtre?

Question

Je suis plutôt nouveau à CSS complexe, et j'ai une question - J'ai une page qui positionne un élément flottant au bas de la page. Il le fait en réglant Bottom: 0 et Position: Absolute.

Lorsque l'utilisateur redimensionne son navigateur à une taille très petite, cet élément couvre tout le contenu de la page. Idéalement, l'élément continuerait à flotter en bas du navigateur à des tailles normales et grandes, mais si la fenêtre du navigateur devait être réduite, le navigateur forcerait une barre de défilement au lieu de déplacer l'élément flottant. plus loin. Essentiellement, je veux dire au navigateur - Peu importe la taille de la fenêtre, ne jamais rendre la page plus petite que 800x600.

Answer 1

Vous pouvez définir html, body { min-width: 800px; min-height: 600px; }

YMMV dans différents navigateurs bien.

Answer 2

Cela dépend vraiment si le pied flottant doit toujours être visible ou s'il peut défiler vers le bas lorsque la fenêtre du navigateur est petite.

Je pense que certains javascript pourraient être plus faciles à gérer qu'une solution CSS. Gardez à l'esprit que min-width et min-height ne fonctionnent pas dans tous les navigateurs.

Vous pouvez utiliser jquery pour vous faciliter la tâche. Le $ (window) .resize (callback) peut être utilisé pour définir une fonction de rappel pour gérer le redimensionnement des fenêtres. J'utilise également les dimensions de la fenêtre dans le cadre de mon code de redimensionnement.

var wh = Math.max (600, $ (fenêtre) .height()); var ww = Math.max (800, $ (fenêtre) .width());

Ensuite, je peux définir la taille d'un div dans ma page en fonction de la taille de la fenêtre. $ ('div # mydiv'). Css ('largeur', ww); Vous pouvez également définir la valeur sur auto pour annuler la valeur spécifiée.

Answer 3

Je sais que c'est un peu une triche, mais vous pouvez utiliser la vieille astuce de mettre dans une image qui est de la largeur minimale requise dans l'élément flottant, et la même couleur que lui. Il est alors effectivement invisible, mais empêche l'élément, et donc la page entière, de rétrécir.