Cocos2d-xの開発をする際、CocosStudioなんかでプロジェクトを作成すると、
トップページの index.html も作られます。
デフォルトでは、body要素の中に、canvas要素とscript要素があるのみです。
今回、大富豪を公開するにあたり、
画面を左右に分け、片側にゲーム（canvas要素）、もう片側に違うものを表示するエリアを作りたいと考えました。
というわけで、Bootstrapのグリッドシステムを使って、画面を左右に分けました。
<div class=”container-fluid”>
<div class=”row”>
<div class=”column col-md-10″><!– ゲーム部分 –></div>
<div class=”column col-md-2″><!– その他部分 –></div>
</div>
</div>
そして、ゲーム部分にcanvas要素を入れてみたのですが、ゲームが小さく表示されるという結果になってしまいました。
rowやcolumnにcssで「height:100%;」と指定してもダメです。
デフォルトでは、ゲームはcanvas要素で囲まれていますが、Cocos2d-xのソースを見たところ、div要素で囲んでもいいようです。
（project.jsonで指定したidを、canvasまたはdivのidプロパティに指定する必要がありますが）
なので、canvasをdivに変えてみたりもしたのですが、何も変わりません。
そこで調べてみると、cssの仕様で、ある要素のheightに相対値(%)が指定された場合、その高さは親要素の高さに対して計算されるのだそうです。
親要素の高さが指定されていない場合は、要素の高さはautoとして計算されます。
なので今回の場合、rowとcolumnだけでなく、その親要素となる<div class=”container-fluid”><body><html>すべてに「height:100%;」を指定する必要があったのです。
html, body {height: 100%;}
.container-fluid, .row, .column {height: 100%;}
これで無事に、画面いっぱいゲームが表示されるようになりました。