Question

我希望我的iframe现在位于我的div框的中心，但我希望iframe可以帮助我，我可以帮助我，我可以在那个白框的中间使用iframe。< / p>

game1.html：

<html>
    <head>
        <title>Racegame</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
        <script src="js/jquery.min.js"></script>
        <script src="js/skel.min.js"></script>

        <script type="text/javascript" src="js/initresize.js" ></script>


        <noscript>
            <link rel="stylesheet" href="css/skel.css" />
            <link rel="stylesheet" href="css/style.css" />
            <link rel="stylesheet" href="css/style-desktop.css" />
            <link rel="stylesheet" href="css/style-noscript.css" />
        </noscript>
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    </head>
    <body> 

    <script>
     function showhide()
     {
           var div = document.getElementById("codebox");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
     }
  </script>
  <script>
  function resizeanshow()
  {
  showhide();

  }
  </script>
    <div id="wrapper">
      <nav id="nav">
        <a href="index.html#work" class="icon fa fa-arrow-circle-left"style=color:red><span>Terug</span></a>
      </nav>
      <div id="main">
        <article id="work" class="panel">
          <header><h2></h2></header>
          <p></p>
          <div class="row">
            <div class="4u">
               <a href="#" class="image fit"><img src="games/racegame/foto/fotozonder.PNG" alt=""></a>
            </div>
            <div class="8u">
               <header>
                  <h1><strong>Racegame</strong></h1>
               </header>
               <p>Spel gemaakt in unity.<br> probeer zo snel mogelijk de finish te halen.</p>
            </div>
            <p>Probeer zo snel mogelijk de finish te halen. Op het circuit heb je een paar obstakels.Deze kan je ontwijken. door de highscores kan je tegen je vrienden racen.De code die gebruikt is kunt u onderaan de pagina vinden.</p>
            <video width="320" height="240" controls="controls">
                <source src="games/racegame/filmpje/racegamefilmpje.mp4" type="video/mp4"/>
            </video>
            <div>
                Controls<br>
                WASD = sturen<br>
                Spatiebalk = remmen
            </div>
            <iframe src="https://c94f7e475c7659ee4ccbf6cdc7964f3cb25bec69.googledrive.com/host/0BzR73x5dCHdZenhLMVUtUEJLSlE/racegame.html" width="960" height="650" scrolling="no" ></iframe>
        </div>
        <button  id="bodyresize">Bekijk hier de code voor de auto</button>
        <div id="codebox" style="display:none">
          <p><!-- //code hier//code hier --></p>
        </div>
      </article>
   </div>
   <div id="footer">
    <ul class="copyright">
        <li>&copy; Sander Gouman All rights reserved. <a href="https://www.facebook.com/sander.gouman" class="icon fa-facebook-square fa-2x"></a><a href="" class="icon fa-youtube-square fa-2x"></a></li>
    </ul>
  </div>
 </div>

initresize.js

/*
    Astral by HTML5 UP
    html5up.net | @n33co
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
 function showhide()
     {
           var div = document.getElementById("codebox");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
     }

(function($) {
    /* Settings */
     var settings = {

            // Speed to resize panel.
                resizeSpeed: 600,

            // Speed to fade in/out.
                fadeSpeed: 300,

            // Size factor.
                sizeFactor: 11.5,       

            // Minimum point size.
                sizeMin: 15,            

            // Maximum point size.
                sizeMax: 15         

        };

    /* skel  */
       skel.init({
            reset: 'full',
            pollOnce: true,
            breakpoints: {
                'global':   { range: '*', href: 'css/style.css' },
                'desktop':  { range: '737-', href: 'css/style-desktop.css', containers: 1200, grid: { gutters: 25 }, viewport: { width: 1080, scalable: false } },
                'mobile':   { range: '-736', href: 'css/style-mobile.css', containers: '100%!', grid: { collapse: true, gutters: 15 }, viewport: { scalable: false } }
            }
        });

    /* Main */
    var $window = $(window);

        $window.on('load', function() {

            var $body = $('body'),
                $main = $('#main'),
                $panels = $main.find('.panel'),
                $hbw = $('html,body,window'),
                $footer = $('#footer'),
                $wrapper = $('#wrapper'),
                $nav = $('#nav'), $nav_links = $nav.find('a'),
                $jumplinks = $('.jumplink'),
                $form = $('form'),
                panels = [],
                activePanelId = null,
                firstPanelId = null,
                isLocked = false,
                hash = window.location.hash.substring(1);

            if (skel.vars.isTouch) {
                settings.fadeSpeed = 0;
                settings.resizeSpeed = 0;
                $nav_links.find('span').remove();
            }

            if (skel.isActive('desktop')) {

                // Body.
                    $body._resize = function() {
                        var factor = ($window.width() * $window.height()) / (1440 * 900);
                        $body.css('font-size', Math.min(Math.max(Math.floor(factor * settings.sizeFactor), settings.sizeMin), settings.sizeMax) + 'pt');
                        $main.height(panels[activePanelId].outerHeight());
                        $body._reposition();
                    };

                    $body._reposition = function() {
                        if (skel.vars.isTouch && (window.orientation == 0 || window.orientation == 180))
                            $wrapper.css('padding-top', Math.max((($window.height() - (panels[activePanelId].outerHeight() + $footer.outerHeight())) / 2) - $nav.height(), 30) + 'px');
                        else
                            $wrapper.css('padding-top', ((($window.height() - panels[firstPanelId].height()) / 2) - $nav.height()) + 'px');
                    };
                    ////test
                     // document.getElementById('bodyresize').onclick = function() 

                     // document.getElementById('bodyresize').onclick = function() 

                     document.getElementById('bodyresize').onclick = function() 
                    {
                    showhide();
                        var factor = ($window.width() * $window.height()) / (1440 * 900);
                        $body.css('font-size', Math.min(Math.max(Math.floor(factor * settings.sizeFactor), settings.sizeMin), settings.sizeMax) + 'pt');
                        $main.height(panels[activePanelId].outerHeight());
                        $body._reposition2();
                    };

                    $body._reposition2 = function() {
                        if (skel.vars.isTouch && (window.orientation == 0 || window.orientation == 180))
                            $wrapper.css('padding-top', Math.max((($window.height() - (panels[activePanelId].outerHeight() + $footer.outerHeight())) / 2) - $nav.height(), 30) + 'px');
                        else
                            $wrapper.css('padding-top', ((($window.height() - panels[firstPanelId].height()) / 2) - $nav.height()) + 'px');
                    };
                ////test    
                // Panels.
                $panels.each(function(i) {
                        var t = $(this), id = t.attr('id');
                        panels[id] = t;
                        if (i == 0) {
                            firstPanelId = id;
                            activePanelId = id;
                        }
                        else
                            t.hide();
                        t._activate = function(instant) {
                            // Check lock state and determine whether we're already at the target.
                                if (isLocked
                                ||  activePanelId == id)
                                    return false;

                            // Lock.
                                isLocked = true;

                            // Change nav link (if it exists).
                                $nav_links.removeClass('active');
                                $nav_links.filter('[href="#' + id + '"]').addClass('active');

                            // Change hash.
                                if (i == 0)
                                    window.location.hash = '#';
                                else
                                    window.location.hash = '#' + id;

                            // Add bottom padding.
                                var x = parseInt($wrapper.css('padding-top')) +
                                        panels[id].outerHeight() +
                                        $nav.outerHeight() +
                                        $footer.outerHeight();

                                if (x > $window.height())
                                    $wrapper.addClass('tall');
                                else
                                    $wrapper.removeClass('tall');

                            // Fade out active panel.
                                $footer.fadeTo(settings.fadeSpeed, 0.0001);
                                panels[activePanelId].fadeOut(instant ? 0 : settings.fadeSpeed, function() {

                                    // Set new active.
                                        activePanelId = id;

                                        // Force scroll to top.
                                            $hbw.animate({
                                                scrollTop: 0
                                            }, settings.resizeSpeed, 'swing');

                                        // Reposition.
                                            $body._reposition();

                                        // Resize main to height of new panel.
                                            $main.animate({
                                                height: panels[activePanelId].outerHeight()
                                            }, instant ? 0 : settings.resizeSpeed, 'swing', function() {

                                                // Fade in new active panel.
                                                    $footer.fadeTo(instant ? 0 : settings.fadeSpeed, 1.0);
                                                    panels[activePanelId].fadeIn(instant ? 0 : settings.fadeSpeed, function() {

                                                        // Unlock.
                                                            isLocked = false;
                                                    });
                                            });
                                });
                        };

                    });

                // Nav + Jumplinks.
                    $nav_links.add($jumplinks).click(function(e) {
                        var t = $(this), href = t.attr('href'), id;

                        if (href.substring(0,1) == '#') {

                            e.preventDefault();
                            e.stopPropagation();

                            id = href.substring(1);

                            if (id in panels)
                                panels[id]._activate();
                        }

                    });

                // Window.
                    $window
                        .resize(function() {

                            if (!isLocked)
                                $body._resize();

                        });

                    if (skel.vars.IEVersion < 9)
                        $window
                            .on('resize', function() {
                                $wrapper.css('min-height', $window.height());
                            });

                // Forms (IE<10).
                    if ($form.length > 0) {

                        if (skel.vars.IEVersion < 10) {
                            $.fn.n33_formerize=function(){var _fakes=new Array(),_form = $(this);_form.find('input[type=text],textarea').each(function() { var e = $(this); if (e.val() == '' || e.val() == e.attr('placeholder')) { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).blur(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).focus(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); _form.find('input[type=password]').each(function() { var e = $(this); var x = $($('<div>').append(e.clone()).remove().html().replace(/type="password"/i, 'type="text"').replace(/type=password/i, 'type=text')); if (e.attr('id') != '') x.attr('id', e.attr('id') + '_fakeformerizefield'); if (e.attr('name') != '') x.attr('name', e.attr('name') + '_fakeformerizefield'); x.addClass('formerize-placeholder').val(x.attr('placeholder')).insertAfter(e); if (e.val() == '') e.hide(); else x.hide(); e.blur(function(event) { event.preventDefault(); var e = $(this); var x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } }); x.focus(function(event) { event.preventDefault(); var x = $(this); var e = x.parent().find('input[name=' + x.attr('name').replace('_fakeformerizefield', '') + ']'); x.hide(); e.show().focus(); }); x.keypress(function(event) { event.preventDefault(); x.val(''); }); });  _form.submit(function() { $(this).find('input[type=text],input[type=password],textarea').each(function(event) { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) e.attr('name', ''); if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); }).bind("reset", function(event) { event.preventDefault(); $(this).find('select').val($('option:first').val()); $(this).find('input,textarea').each(function() { var e = $(this); var x; e.removeClass('formerize-placeholder'); switch (this.type) { case 'submit': case 'reset': break; case 'password': e.val(e.attr('defaultValue')); x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } else { e.show(); x.hide(); } break; case 'checkbox': case 'radio': e.attr('checked', e.attr('defaultValue')); break; case 'text': case 'textarea': e.val(e.attr('defaultValue')); if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } break; default: e.val(e.attr('defaultValue')); break; } }); window.setTimeout(function() { for (x in _fakes) _fakes[x].trigger('formerize_sync'); }, 10); }); return _form; };
                            $form.n33_formerize();
                        }

                    }

                // CSS polyfills (IE<9).
                    if (skel.vars.IEVersion < 9)
                        $(':last-child').addClass('last-child');

                // Init.
                    $window
                        .trigger('resize');

                    if (hash && hash in panels)
                        panels[hash]._activate(true);

                    $wrapper.fadeTo(400, 1.0);

            }

        });

})(jQuery);

Answer 1

首先，您需要从宽度上下降约150px，如下所示：

<iframe src="https://c94f7e475c7659ee4ccbf6cdc7964f3cb25bec69.googledrive.com/host/0BzR7‌3x5dCHdZenhLMVUtUEJLSlE/racegame.html" width="810" height="650" scrolling="no" >

它可能会在这一点上居中，但如果它不仅仅是margin: 0 auto;应用于样式。

编辑：

如果你想忽略左边的填充，你可以申请margin-left: -75px

注意：这些数字是根据您提供的图像估算的。

编辑2：

将面板类的宽度从45em更改为51.5em，忽略以前的更改。同时将#wrapper宽度从45em更改为51.5em

Answer 2

宽度和高度均为100％，iframe应填充整个div内容。现在，如果您添加填充，请务必在iframe上设置box-sizing: border-box，以便填充不会添加到维度中，而是添加到维度中。见下面的例子。

如果您的情况不同，请创建一个仅显示您的问题的片段（或jsfiddle），我们不希望您的整个网站代码都在jsfiddle中。

body { background: #ddd; }

.container {
    background: orange;
    width: 200px;
    height: 250px;
    margin: 20px;
}

iframe {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 10px;
    box-sizing: border-box;
}

<div class="container">
    <iframe src="http://jsfiddle.net/"></iframe>
</div>

在div中心的iframe

2 个答案: