◆ inline-blockで縦に並べるときは 中身が空だと隙間ができる
  50%の2つで100%ぴったりにしていてもはみ出してスクロールバーが出る
  普通にblockにすれば中身によらず 隙間は出ない

◆ inline-blockで高さ100%で横に並べるときも中身が空だと 下に余白が入ってスクロールバーが出る
  横に並べるときはinline-blockじゃないとできない 

全画面のもので入力と出力で半分半分の画面を作っていたらまたも謎挙動に出会いました

今回はFirefoxもChromeも同じ動きなのでこれが仕様なのかもしれません

左右に分割

<!doctype html>
<style>
*{margin:0;box-sizing:border-box;height:100%;}
#window{
width:100%;
}
input.button:checked~#window>.area{
width: 50%;
height:100%;
display:inline-block;
}
</style>
<div class="button"></div>
<input type="checkbox" class="button">
<div id="window">
<div class="area"></div><div class="area"></div>
</div>

今回のページのコードは長いので関係ない部分を省略してます
borderはbox-sizingをborder-boxにしているので問題にならないので省略してます
真ん中に左右分割と上下分割の切り替えボタンがありますがこれも関係ないので省略します
全部が見たいなら下の方にあるリンクのページのソースを見てください


height:100%のdivブロックをwidth:50%でdisplay:inline-blockにすることで横に並べます
css-io-03

なんかスクロールバーが見えますね

もうひとつ同じく左右分割で全画面を使うページを作っていて そっちでは同じ構成なのにスクロールバーがありませんでした
原因がわからずCSSをひとつずつ比べていったのですが 全然わからずにとうとう全く一緒にしても片方はスクロールバーあり もう片方はスクロールバーなしでした
さすがにバグだよね って思ったのですがふとHTMLの方を見ると 片方はdivの中身が空でもう片方はtextareaがあります

これが関係はしないだろうと思ったのですが 一応合わせてみるとなんと スクロールバーが消えました
なんかもうわけがわかりません

試していると divの中身はなんでもいいけど何かが必要なようです
<div class="button"></div>
<input type="checkbox" class="button">
<div id="window">
<div class="area">1</div><div class="area">2</div>
</div>
css-io-02

1と2が入るだけでスクロールバーが消えてます

上下に分割

<!doctype html>
<style>
*{margin:0;box-sizing:border-box;height:100%;}
#window{
width:100%;
}
#window>.area{
width:100%;
height:50%;
display:inline-block; 
}
</style>
<div class="button"></div>
<input type="checkbox" class="button">
<div id="window">
<div class="area"></div><div class="area"></div>
</div>
上下分割の場合は上と下の間に隙間ができているせいでスクロールバーが出ています
css-io-04

この場合も同じくdivに数字を入れればこの通り
css-io-05

スクロールバーはなくなりました

今回はinline-blockを選んでますが 横に並べるときはともかく縦に並べるのにinline-blockを使う必要はありません
なので普通にblockにすると
css-io-01

スクロールバーが出ません
height:100%というよりはinline-blockの問題な気がしてきました
上下分割は100%指定してるわけじゃなくて2つ合わせて100%ですし


ところでこのページでは 中央にある紫の丸いところをクリックすることで上下分割と左右分割が切り替わります
しかもCSSのみでJavaScriptなしです
http://var.blog.jp/s/twoarea-split.html