PC SOFT

FORUMS PROFESSIONNELS
WINDEVWEBDEV et WINDEV Mobile

Accueil → WEBDEV 2024 → RWD adapter la taille de la page au navigateur
RWD adapter la taille de la page au navigateur
Débuté par xavier, 27 juin 2018 12:02 - 9 réponses
Membre enregistré
48 messages
Popularité : +1 (1 vote)
Posté le 27 juin 2018 - 12:02
Bonjour,
dans un projet en Responsive Web Design, une page "Home" a comme modèle un modèle de page comme la photo ci-dessous:





Comment faire pour adapter la taille du champ iframe selon le navigateur de l'utilisateur?

Voici le résultat que je souhaite obtenir (résultat obtenu en modifiant à la main l'image ci-dessus):





Info: Je n'utilise pas de zoning dans le modèle de page.

Merci pour l'aide

Xavier
Membre enregistré
382 messages
Popularité : +18 (22 votes)
Posté le 27 juin 2018 - 14:21
Bonjour,

Il ne me semble pas qu'il y es une option pour ca.
Je pense que des modifications en CSS pure serai ce qu'il y a de mieux a faire.

--
https://www.cedvano.com
Membre enregistré
48 messages
Popularité : +1 (1 vote)
Posté le 27 juin 2018 - 16:29
Merci pour la réponse.
Avez-vous plus de piste sur la manière de modifier par CSS svp?
Faut-il modifier le style html / CSS de la page directement, modifier le style prédéfini de la page ?
Merci
Membre enregistré
1 623 messages
Popularité : +100 (114 votes)
Posté le 27 juin 2018 - 17:38
Bonjour,

Pour pouvoir faire en sorte que la hauteur suive celle du navigateur il faut passer le champ en épinglé:




Ensuite dans les ancrages, de nouvelles fonctions sont disponible, notamment l'ancrage en hauteur :


Membre enregistré
48 messages
Popularité : +1 (1 vote)
Posté le 28 juin 2018 - 07:51
Merci beaucoup c'est parfait
Membre enregistré
382 messages
Popularité : +18 (22 votes)
Posté le 28 juin 2018 - 08:36
François C. a écrit :
Bonjour,

Pour pouvoir faire en sorte que la hauteur suive celle du navigateur il faut passer le champ en épinglé:




Ensuite dans les ancrages, de nouvelles fonctions sont disponible, notamment l'ancrage en hauteur :



Bonjour,

Pouvez-vous me dire quelle cellule ? La centrale ?
Cela doit surement fonctionner avec des zone.

Cordialement,

--
https://www.cedvano.com
Membre enregistré
48 messages
Popularité : +1 (1 vote)
Posté le 28 juin 2018 - 09:44
Bonjour,
le modèle de page reste le même avec l'ancrage de la page suivant:




le footer du modèle de page est une cellule encrée comme ceci:




Sur la page "Home" qui utilise le modèle de page, je crée une cellule ("en rouge ci-dessous") et je la mets en encrage suivant:




Lors du lancement, la hauteur de la page s'adapte au navigateur:




Cordialement
Membre enregistré
48 messages
Popularité : +1 (1 vote)
Posté le 29 juin 2018 - 08:49
Bonjour,
même si l'adaptation en hauteur de la cellule s'effectue très bien, comment faire pour adapter un champ de la fenêtre (placé sur la cellule) aussi en hauteur ?
Dans ma cellule, j'ai un champ iFrame. Mais sa taille reste la même et ne s'adapte pas à la hauteur de la cellule et donc à la hauteur du navigateur.
Merci
Posté le 04 juillet 2019 - 11:25
Merci beaucoup xavier c'est au top
Membre enregistré
324 messages
Popularité : +21 (51 votes)
Posté le 04 juillet 2019 - 16:15
Dans ma cellule, j'ai un champ iFrame. Mais sa taille reste la même et ne s'adapte pas à la hauteur de la cellule et donc à la hauteur du navigateur.
Merci


La hauteur de l'iframe doit être codé dynamiquement du côté navigateur, en fonction de l'espace disponible en hauteur à l'écran. Le plus simple étant de placé un champ lib par exemple de 1*1 pixel invisible, tout en bas à droite du navigateur, superposable avec un ancrage en bas à droite. Ensuite on peut intéroger la position du champ au besoin pour connaitre la hauteur disponible et adapté la hauteur du champ.

même si l'adaptation en hauteur de la cellule s'effectue très bien, comment faire pour adapter un champ de la fenêtre (placé sur la cellule) aussi en hauteur ?


Clic droit sur le champ > Ancrage > Adapter Hauteur ou Largeur au contenant ;)
Message modifié, 04 juillet 2019 - 16:16