Discussion :

[Shinja]

Bonjour, je viens demander un peu votre aide sur un problème que je rencontre concernant une div en table-cell. Pour bien vous expliquer mon problème, je bosse actuellement sur ma propre fancybox en jquery. Pour bien centrer l'image et l'adapter à la résolution de l'écran, j'utilise donc un container avec position fixed et un height/width à 100%. Pour le reste, j'utilise une div avec un display à table et deux div enfant avec un display à table-cell. Pas de problème jusqu'à présent, le tout s'afficher sur bien, mais lorsque la hauteur de la second div devient plus haute que l'image, forcément ça dépasse. Dans cette seconde div, je met les commentaires de la photo, et forcément ça risque de dépasser. Je ne souhaite pas fixer la hauteur, car elle doit s'adapter à chaque écran et doit surtout s'aligner avec la hauteur de la photo. Dans mon cas, la seule solution que j'ai trouvé c'était de jouer avec jQuery de cette façon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$(container).find('img.popup-image').hide();
$(container).find('#photo-panel').hide();
$(container).find('img.popup-image').on('load', function () {
         $(container).find('img.popup-image').slideDown('slow', function(){
                  $(container).find('#photo-panel').height(($(container).find('img.popup-image').height() / 2) * 1.2);
                  $(container).find('#photo-panel').fadeIn('fast');
          });
});

Pour éviter de passer par jquery, j'ai tenté de définir un duo comprenant une div avec une position relative et son enfant en absolute, mais si je ne fixe pas la hauteur, rien ne s'affiche ou ça déborde. J'ai regardé pas mal de petits exemples, mais le souci c'est que ça ne marche pas sous Firefox... Quand j'exécute ce code, rien ne s'affiche (comme pour mon projet) : http://plnkr.co/edit/HWTsCsUpddHP3rZsMUtz?p=preview

Donc je voulais savoir si dans mon cas, je suis obligé de passer par jQuery pour adapter seconde div.table-cell à la hauteur de l'image.

[Shinja]

J'ai trouvé une autre solution avec un code plus léger :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="item" style="display:table; margin: auto auto; height:100%; max-width: 90%; table-layout:fixed">
 
    <div  style="display:table-cell; height:100%; width:100%; vertical-align: middle;">
        <div style="position:relative; height: 100%; width:100%; display:table-cell">
            <div style="float:left; position: relative; width: 70%; height: 100%;">
                <img src="/photos/original/1456145934597722624.jpg" class="img-responsive photo" style="width: 100%;">
            </div>
            <div style="float:left; position: relative; width: 30%; height: 100%; ">
                <div class="xme" style="position: absolute; width: 100%;background-color: white; padding:20px;">
                    www
                </div>
            </div>
        </div>
    </div>
</div>
 
<script type="text/javascript">
    $('img.photo').hide();
    $('img.photo').load(function(){
        $(this).show();
        $('.xme').height($(this).height() - 40);
    });
</script>

C'est juste un test, mais ça fonctionne comme je le veux, c'est nettement plus propre je trouve !