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