Question

我正在使用一个html文件，其中有一个嵌入在html中的游戏，但是，我只是希望游戏显示，并且似乎在游戏外面的右边的html容器中出现了一些空间底部。如何让我的游戏占用整个html容器？这是代码：

<!doctype html>
<html>
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <head>
        <meta charset="utf-8">

            <link rel="stylesheet" href="css/main.css">

    </head>

    <body>


        <div class="container">

            <!-- Start Screen -->
            <div id="start_screen">
                <h3 id="credits">

                </h3>
                <h3 id="last_score"></h3>
                <h3 id="high_score"></h3>

                <div class="controls"></div>

                <div class="options">
                    <ul>
                        <li><a href="javascript:void(0);" id="start_game">start</a></li>
                        <li><a href="javascript:void(0);" target="_blank" id="tweet">tweet</a></li>
                        <li><a href="javascript:void(0);" target="_blank" id="fb">fb like</a></li>
                    </ul>
                </div>
            </div>
            <!-- /Start Screen -->

            <!-- Loading sounds -->
            <audio id="start" loop>
                <source src="sound/dragonsound.ogg"  type="audio/ogg">
                    <source src="sound/pappu-pakia2.3.mp3"  type="audio/mp3">
                        </audio>

            <audio id="angry_jump">
                <source src="sound/jump1.ogg" type="audio/ogg">
                    <source src="sound/jump1.mp3" type="audio/mp3">
                        </audio>

            <audio id="sad_jump">
                <source src="sound/jump2.ogg" type="audio/ogg">
                    <source src="sound/jump2.mp3" type="audio/mp3">
                        </audio>

            <audio id="happy_jump">
                <source src="sound/jump3.ogg" type="audio/ogg">
                    <source src="sound/jump3.mp3" type="audio/mp3">
                        </audio>

            <audio id="flap">
                <source src="sound/flap.ogg" type="audio/ogg">
                    <source src="sound/flap.mp3" type="audio/mp3">
                        </audio>

            <audio id="ting">
                <source src="sound/ting.ogg" type="audio/ogg">
                    <source src="sound/ting.mp3" type="audio/mp3">
                        </audio>

            <canvas id="game_bg"></canvas>
            <canvas id="game_main"></canvas>

            <div id="score_board">0</div>

            <div id="invincible_timer">
                <div id="invincible_loader"></div>
            </div>

            <a href="javascript:void(0)" id="mute"></a>

            <!-- Loading Screen -->
            <div id="loading">
                <p id="loadText">Loading...</p>
                <div id="barCont">
                    <div id="bar"></div>
                </div>
            </div>

        </div>

        <div id="fps_count"></div>

        <div id="share_btns">
            <!-- Share -->



            <!-- google plus -->
            <div class="share-button">
                <!-- Place this tag where you want the share button to render. -->
                <div class="g-plus" data-action="share" data-annotation="bubble"></div>

                <!-- Place this tag after the last share tag. -->
                <script type="text/javascript">
                    (function() {
                     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                     po.src = 'https://apis.google.com/js/plusone.js';
                     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                     })();
                    </script>
            </div>


            <!-- Facebook -->
            <div class="share-button"><div id="fb-root"></div>
                <fb:like send="false" layout="button_count" width="450" show_faces="false"></fb:like>
                    <script>(function(d, s, id) {
                             var js, fjs = d.getElementsByTagName(s)[0];
                             if (d.getElementById(id)) return;
                             js = d.createElement(s); js.id = id;
                             js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=190502394323833";
                             fjs.parentNode.insertBefore(js, fjs);
                             }(document, 'script', 'facebook-jssdk'));</script>
                    </div>





            <script type="text/javascript">
                /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
                var disqus_shortname = 'khelein'; // required: replace example with your forum shortname

                /* * * DON'T EDIT BELOW THIS LINE * * */
                (function() {
                 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
                 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                 })();
                </script>



            <script src="js/jquery-1.8.2.min.js"></script>
            <script>window.mit = window.mit || {};</script>
            <script src="js/utils.js"></script>
            <script src="js/backgrounds.js"></script>
            <script src="js/forks.js"></script>
            <script src="js/branches.js"></script>
            <script src="js/collectibles.js"></script>
            <script src="js/pappu.js"></script>
            <script src="js/pakia.js"></script>
            <script src="js/main.js"></script>
            <script src="js/loader.js"></script>

            <script>
                // if theres adblock hide gads container
                setTimeout(function() {

                           if (typeof window.google_ad_block === 'undefined')
                           $('.gads').remove();

                           }, 1000);

                if (location.hostname.indexOf('localhost') === 0) {
                    $('.gads, #disqus_thread').remove();
                }
                </script>

            <script>

                var _gaq = _gaq || [];
                _gaq.push(['_setAccount', 'UA-36603798-1']);
                _gaq.push(['_trackPageview']);

                (function() {
                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
                 })();

                </script>

    </body>
</html>

Answer 1

在这里看一下所谓的重置表：

http://meyerweb.com/eric/tools/css/reset/

您正在寻找的具体CSS是：

html, body { margin: 0; padding: 0; }

Answer 2

我不确定您是否在main.css中设置了'.container'，这可能对您有用

.container
{
    position:absolute;
    top:0px;
    left:0px;
    margin:0;
    padding:0;
}

或者，您可以使用POWERFUL * SELECTOR最初使用

重置所有css

*
{
    padding:0;
    margin:0;
    position:absolute;
    top:0px;
    left:0px;
}

如何在html中修复正确的列空间和底部容器空间

2 个答案: