How to specify height using fancybox 2.1.4

Question

Here's a link to the plugin:

Website

I tried all the options in the documentation as well as answers in SO but none worked for me.

My problem is simple I think. I just need to adjust the height of my fancybox relative to the height of my <div> that is inside it.

here's my code:

$("#home #_prcButtons input[type='button']").each(function() {
    $('#' + this.id).click(function() {
        var getId = (this.id === '_proceed') ? 
        $.fancybox({  href: '#questionToEnter', helpers:  { overlay: { locked: false, css: { 'background' : 'rgba(58, 42, 45, 0.95)' } } }, openEffect: 'fade', closeEffect: 'fade'}) : window.location.href = "https://google.com";
    });
});

Here's the css of my div:

#questionToEnter { display:none; width:450px; margin:auto; background:#f7d4d4; padding:10px;}

Here's how it looks:

As you can see, the fancybox won't adjust to the height of my div. Please help me. Cheers!

Answer 1

Solved my problem!
I realized that my <div> appears less than 100px in height.

Adjusting the minHeight did the trick:

minHeight: '60';

Cheers!

Answer 2

You can specify it using "height" attribute in fancybox. See this example:

<script type="text/javascript">
$(document).ready(function () {
    $('.fancybox').fancybox({
        type: "iframe",
        padding: 0,
        fitToView: false,
        autoSize: false,
        width: 718,
        height: 503
    });
});
</script>