CSSでheight: 100%をしているのに対象要素がウィンドウの高さにならない

Question

https://codepen.io/anon/pen/MEwNgz

期待している結果としては、#subの高さがウィンドウの高さに常になることなのですが、#subの高さがウィンドウの高さになってくれるのは、初期のページ読み込み時のスクロールしなくても表示される領域が対象のようで、スクロールしないと表示されない領域部分に関しては、height: 100%が適用されずに余白がうまれてしまうようです。

HTMLとCSSでどうにかできないものでしょうか？

<div id="container">
  <div id="sub">
  </div>

  <div id="main">
    <div class="main-child">
    </div>
  </div>
  
</div>

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%
}

* {
  box-sizing: content-box;
}

#container {
  height: 100%;
  background: red;
  display: flex;
}

#sub {
  height: 100%;
  width: 200px;
  background: yellow;
}

#main {
  height: 100%;
  width: 100%;
  background: gray;
}

.main-child {
  height: 1000px;
  background: red;
}

Answer 1

#container, #sub, #main の height: 100%; をはずしてください。

---

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

Comments

[退会済みユーザー]

ありがとうございます！なぜ、外すと上手くいくのでしょうか？

[kei344]

height: 100%;にすると内包要素の高さがあってもそれ以上広がれないからです。（はみ出た部分が表示されるのはbodyのoverflowがスクロールになっているから）

[退会済みユーザー]

ううう。。。なんかややこしいですね。わかったようなわからないような。時間のある時にじっくり調べてみます。ありがとうございました！！

Answer 2

下記はいかがでしょうか。

#sub {
  position: fixed;  /* ←追記 */

  height: 100%;
  width: 200px;
  background: yellow;
}

#main-1 {
  margin-left: 200px;  /* ←追記 */

  height: 1000px;
  background: red;
}