28172 sujets

CSS et mise en forme, CSS3

EDIT : Content + min-height après une div scrollable + flexbox

EDIT :

Je suis entrain de réaliser un template ~responsive~ pour wordpress.

Pour les pages d'article, l'idée est d'avoir le gabarit suivant:

Un header/menu en position: fixed, toujours visible à l'écran0

Une image qui correspond à la preview de l'index.php mais agrandie, et qui rempli l'écran sur toute sa largeur au minimum. Si la hauteur est plus longue que l'écran, on a un overflow de la div qui entoure l'image pour pas qu'elle ne dépasse la hauteur de l'écran. Ainsi on a une image qui peut être plus petite que la hauteur de l'écran, mais qui sera toujours adaptée à sa largeur. Cette image est en position: fixed ce qui permet au contenu qui suit de passer par dessus au scroll.

Ensuite on a un du contenu (texte, image) qui est poussé par l'image (qui apparaît après) mais qui peut également scroller par dessus l'image. Ce contenu doit au moins être de la hauteur de l'image, de sorte qu'il la recouvre entièrement en scrollant.

Ensuite, le footer, qui a une taille dynamique et qu'on affiche parfaitement en bas de page grâce à une page taillée en flexbox.

--

J'ai créé un JSFiddle pour vous rendre compte de l'avancée du projet.

--

En ce moment j'essaie de corriger la taille du contenu pour qu'il fasse au moins la hauteur de l'image. Mais j'ai l'impression que flexbox vient m'embêter car l'image ne peut pas atteindre sa hauteur maximale, comme si le bottom du contenu devait forcément être en bas de l'écran et le haut du contenu rogne sur le bas de l'image, qui ne peut pas pousser.
Modifié par seeane (12 Feb 2016 - 10:01)
Je crois avoir une solution, mais elle est inélégante au possible.

En fait, je duplique le code qui me permet d'afficher l'image.


  <?php include("menu.php"); ?>
  <div class="postThumbnail">
    <?php
          if ( has_post_thumbnail() ) {
              the_post_thumbnail();
          }
        ?>
  </div>
  <div class="postThumbnailHidden">
    <?php
          if ( has_post_thumbnail() ) {
              the_post_thumbnail();
          }
        ?>
  </div>


Puis, pour la deuxième image, j'utilise les même propriétés de width/height que la première, saut que je la cache (visbility: hidden);


#single\.php .postThumbnail img {
    position: fixed;
    width: 100%;
    height: auto;
    z-index: 1;
}

#single\.php .postThumbnailHidden img {
    visibility:hidden;
    width: 100%;
    height: auto;
}



Du coup, j'ai exactement la taille de l'image en background, et elle pousse le footer comme il faut.

Mais c'est inélégant car je fais appelle deux fois à la même image et que j'en cache une.

Si quelqu'un a une meilleure idée, je prends!

Par ailleurs /!\ si le ratio n'est pas largeur < hauteur, mais hauteur < largeur, il faudrait que l'image s'adapte à la hauteur du viewport, en dépassant sur les côté.

Est-ce possible?
Bonjour,

Je fais une petite update :

Je pense qu'il doit être possible de récupérer la hauteur d'une div fixed avec du JS, mais à chaque fois que j'essaie de récupérer la valeur, elle me sort en "undefined".

Je continue avec la méthode de l'image dédoublée, une en fixed, une en normal avec un visibility hidden, pour pousser le contenu.

En revanche, je suis confronté à un dernier problème :

J'ai une div qui apparaît juste après mon image. Mais il faudrait que sa hauteur soit au moins égale à la hauteur de la fenêtre moins (-) la hauteur du footer, de sorte que quand on scroll elle recouvre au moins l'image, par défaut.

J'ai essayé plein de choses en JS, mais c'est pas mon truc.

Des idées?

PS : le template est actuellement en ligne pour faire vos tests : extatic.net

EDIT : J'ai également créé un JSFiddle : JSFiddle
Modifié par seeane (12 Feb 2016 - 00:14)
Sujet clos
Aller à