Fancybox 不会尊重身高

Question

if I don't set the height of the box and leave it by default: the scrollbar is shown as the box is not big enough

$('#newsletter').fancybox({
    'type': 'iframe',
    'href': 'http://es.solmelia.com/nSubscriber/jsp/C_Subscribe_Newsletter.jsp',
});

if I set it to 400:

$('#newsletter').fancybox({
    'type' : 'iframe',
    'href' :   'http://es.solmelia.com/nSubscriber/jsp/C_Subscribe_Newsletter.jsp',
    'padding' : '20',
    'height' : '400'
});

(looks way bigger than 400)

also tried

$('#newsletter').fancybox({
    'type'              : 'iframe',
    'href'          :   'http://es.solmelia.com/nSubscriber/jsp/C_Subscribe_Newsletter.jsp',
    'height' : '400px',
    'transitionIn'  :   'elastic',
},function(){$.fancybox.resize();});

which gives same result as first example

Answer 1

You can try using the public method resize , once content has been loaded, see method description :

* Auto-resizes FancyBox height to match height of content

Ref : http://fancybox.net/api

Method Usage : $.fancybox.resize();

What you can try :

    $('#newsletter').fancybox({
                        'type'          : 'iframe',
                        'href'          : 'http://es.solmelia.com/nSubscriber/jsp/C_Subscribe_Newsletter.jsp',
                        'scrolling'     : 'no',
                        onComplete : function(){ $.fancybox.resize();}
                });

onComplete - Will be called once the content is displayed

Answer 2

I think the issue you have here is actually inside the iFrame not fancybox. An iframe will not set its dimensions based on the size of the content within. my recommendation would be to avoid iframes as they are almost always problematic

Answer 3

1. Sometimes, It occurs due to zoom.
2. Can you try updating the 'height' : '400px' . It may works.