javascript - 如何修复html中的右侧列空间和底部容器空间-6ren

javascript - 如何修复html中的右侧列空间和底部容器空间

转载作者：行者123 更新时间：2023-11-28 08:54:45

我正在使用一个 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>

最佳答案

看看这里所谓的“重置表”:

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

您正在寻找的具体 CSS 是:

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

关于javascript - 如何修复html中的右侧列空间和底部容器空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18645217/

文章推荐： ios - 如何在呈现 View 后上移 View ？

文章推荐： css - 2 颜色线性渐变进度条只完成一半

文章推荐： css - 如何显示与其他元素颜色不同的面包屑元素

iframe - 如何在谷歌浏览器中创建侧边栏(右侧)？
似乎这是不可能的，但如果有人提示如何在谷歌浏览器中创建右侧边栏(如 iframe)，任何提示都会有所帮助。谢谢。最佳答案如果你的意思是这样的这是来自 google chrome 实验 api:
c - 如何修剪该数组中的空格(右侧)？
您好，我在用 C 语言解决编程任务时遇到问题。 The funktion "Trim" should replace all spaces at the end of a String with nu
c# - 查找将窗口停靠到左侧/右侧
有什么方法可以找到一个事件(或属性或方法或类似的东西)来检测窗口停靠到左侧或右侧吗？描述: 通过 WindowState 属性，您可以了解当您的窗口在正常/最小化/最大化这三种状态之间改变状态时。在
c++ - 寻找算法来确定一个点是否在圆弧的左侧/右侧
我目前需要找到一个算法来确定一个点是在圆弧的右侧还是左侧。这是以下算法的扩展以包含弧: // isLeft(): tests if a point is Left|On|Right of an i
selenium-webdriver - 如何将窗口位置设置到屏幕的左侧/右侧
我正在使用 Selenium 执行测试，该测试在 3 个浏览器上并行执行。我想以下一种方式定位 window :左侧，右侧和底部，所以基本上我正在寻找与 (start btn+left btn...)
jquery 在表单中插入 div 右侧
如果我有下面的代码，并且我想插入一个带有 jquery 的 div 作为表单标记内的第一个元素，那么最好的方法是什么？ //i want to insert a div here with
python - 排列排序列表中的元素，使所有冗余元素位于列表的左侧/右侧
有没有比这个更好的方法来解决这个问题？ def 渲染(arr): single_elements = [] double_elements = [] for i in xrange(len(arr
html - 右侧 float 元素
Home About
html - 右侧 float 的div无法调整其左侧图像的大小并溢出
我遇到的问题是: www.dondolomemories.it 当调整窗口大小时， Logo 图像直到最后一刻才调整大小，导致可怕的两行菜单溢出。我花了将近 2 个小时尝试大量不同的设置。有人可以帮
右侧 float 下的 CSS
我希望我能很好地解释这一点。我有一个 style="float: right;"的 div在这个 div 中，我有一个包含一些编辑器字段的表。但现在我想要两个文本编辑器框(在 .NET MVC3 @H
html - 右侧 div 的放置和并排设计
如果有人能帮助我解决这个问题，我将不胜感激，因为我无法让它工作。这是我正在努力处理的代码:http://jsfiddle.net/sp91c3nk/ 基本上，我希望右侧导航栏与灰色主要内容区域处于同
css - 在图像的顶部、右侧、底部和左侧对齐文本？
我正在尝试在图像的所有四个边上添加文本，但我无法让正确的文本正确对齐。右边的文字仍然在左边。 fiddle :https://jsfiddle.net/y75L0ww9/ Text on top Te
半高的 css3 阴影框顶部和左侧 + 右侧
我正在尝试为顶部以及左侧和右侧设置 css 阴影，但高度降低。我熟悉模糊/半径，但我希望阴影非常短。 picture from wix template (还不能上传，抱歉) 有人可以帮帮我吗？我看到
html - 如何将按钮放在另一个按钮的(右侧)旁边
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 6 年前。 Improve
CSS:想要位置:粘性以将元素放置在其父容器的底部/右侧
请看这个jsfiddle . 我想要与 innerText “嗨!”始终出现在其包含父级的可见部分的底部/右侧。它不应与其父级的内容一起滚动。 HTML: Header
html - 右侧 float 提交
我有一个输入框和一个提交按钮。当我向右浮动提交按钮时，我希望它在与输入字段相同的点结束 - 这是我的意思的一个例子:http://prntscr.com/aggln5 目前，输入和提交在不同的点结束
css - 右侧 float 元素的奇怪填充或边距
我基本上刚刚开始让我的网站响应，但出于某种原因，语言 div (#lang) 设置为向右浮动，正在向右浮动，但在它的右侧有一个小边距。虽然没有填充设置父 div #container，但我无法理解。
html - 右侧 float 框
我目前正在创建一个网站，该网站有一个带有文本等内容的居中框。现在，我还想要一个漂浮在右边的盒子，与我的主盒子有一点缝隙。留个图吧，我画的红框就是我要制作的 float 框。顺便说一句。蓝色方框只是我
css - 右侧 Bootstrap 上的个人资料图片
我不是 UI 开发人员，但这次需要玩 css。为用户配置文件编写表单。我快完成了，但还有一个小问题。问题个人资料图片未正确显示在右侧。因此，第一个字段(组织名称)显示不正确自从过去两个小时以来，
javascript - 卸下右侧和底部/右侧 handle
我有以下脚本: http://jsfiddle.net/rYFEY/12/ 效果很好，除了我需要移除右侧和右下角的 handle ，只留下底部 handle 用于调整大小。目前，如果我点击右 hand

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何修复html中的右侧列空间和底部容器空间