Est-il possible de faire défiler un navigateur Web pour afficher les éléments de position fixe CSS qui se trouvent en dehors de la fenêtre d'affichage du navigateur Web?

Question

J'essaie de créer une mise en page CSS où la page semble être au milieu de la forêt. Il y a un div à gauche et à droite avec les arbres d'arrière-plan, certains divs en-tête qui montrent le haut de la page avec divers animaux sauvages, et quelques divs de bas de page qui montrent le fond avec plus d'animaux sauvages. dont est positionné en utilisant "position: fixed" en CSS.

Ensuite, il y a un contenu au milieu qui est positionné normalement et scrollable. Tout fonctionne bien. Le problème que j'ai est que la mise en page de la forêt d'arrière-plan est fixée à 1204x768 mais bien sûr certaines fenêtres de navigateur Web peuvent ne pas être aussi grandes. Malheureusement, lorsque le contenu défilera comme prévu, les éléments de position fixe ne seront jamais affichés s'ils sont en dehors de la taille de la fenêtre du navigateur. Clairement non acceptable.

J'ai essayé de définir le débordement: défilement et hauteur: 768 sur les éléments .body et .html dans la feuille de style mais pas de chance.

Notez que je positionne tout avec top: et left: valeurs dans le CSS. Je sais que je pourrais contourner cela en utilisant le bas: et à droite: mais le problème est que les images de pied de page ne seraient pas alignées.

Cela peut tout simplement pas être possible, auquel cas je vais devoir retravailler le graphisme, mais si c'est possible, j'aimerais savoir comment!

Answer 1

bien sûr quelques fenêtres de navigateur Web ne peut pas être que les grandes

Ou bien ce petit! La probabilité que la fenêtre du navigateur soit exactement la bonne taille pour mettre vos décorations sur les bords est assez petite; C'est toujours le problème avec la mise en page fixe. Je sais que je pourrais contourner cela en utilisant bottom: et right: mais le problème est que les images de pied de page ne seraient pas alignées.Oui, concevoir des images qui peuvent modifier leurs jointures en réponse aux changements de taille de page est plus de travail, mais c'est faisable. Vous devez exporter le calque 'oiseau + feuillage' et le calque 'écureuil + feuillage' sous la forme d'images transparentes autonomes, puis les poser sur le dessus d'une image latérale plus longue. Pour rendre les bords de l'objet agréables et lisses, il faudrait une transparence de 8 bits de PNG, ce qui nécessiterait un hack de rendu PNG pour IE6. Pas la fin du monde cependant.

Malheureusement, alors que le contenu défile comme prévu, les éléments de position fixes ne seront jamais affichés

Est-ce un problème? Ils sont uniquement décoratifs dans la nature.

J'ai essayé de placer trop-plein: faire défiler et hauteur: 768 sur le .Body et les éléments .html

Pour cette approche, vous devrez régler « overflow: auto; height: 768px; 'sur un wrapper < div> qui contient à la fois votre # sidebar-left et votre #content.

Answer 2

Vous pouvez avoir deux images: 1) une droite contenant les bons arbres et l'image du bas du pied et 2) une image de gauche avec les arbres de gauche. Faire le pied de fond beaucoup plus large que nécessaire et les arbres (gauche et droite) beaucoup plus grand que ce qu'ils doivent être.

Ensuite, définissez l'image de droite en bas: et à droite: et définissez l'image de gauche en bas: gauche :. Cela forcera les images à toujours être à l'extérieur de la page, peu importe la taille du navigateur. Réglez ensuite l'index z de l'image de droite juste derrière l'image de gauche. Il semblera alors toujours que la page sera bordée. Ou vous pouvez définir une largeur et une hauteur fermes sur le conteneur parent, et ils seront toujours sur la bordure du conteneur. Vous pouvez également définir un min-width et -height si vous avez besoin d'une certaine taille minimum. En ce qui concerne les choses qui ne sont pas visibles à une certaine résolution, vous n'allez vraiment pas vous en passer. Vous pouvez avoir deux séries d'images, une pour les résolutions normales et une pour les résolutions plus petites. Ensuite, vous pouvez obtenir la largeur et la hauteur du navigateur avec $(window).height() et $(window).width() avec jQuery, et charger les images appropriées.

EDIT: Après avoir regardé votre site, je suis à peu près sûr que la deuxième partie de cela (définir une largeur fixe pour un conteneur, puis mettre une image en bas à droite et en bas à gauche) fonctionnera pour ce que vous voulez. Cela forcera la page à avoir une certaine largeur, et aura ainsi toute la bordure visible.