css - ネストされた div の高さを 100% に設定

Question

これは何度も回答されていますが、div の高さを 100% にすることはできません。

他のすべてのソリューションには、html、body、および親 div を に設定することが含まれheight: 100%ます。

私はこれを試しましたが、うまくいきません。この例では、inner_column特に高さ 100% にしようとしているのは div です。

コード例:

html:

<div id="outer_column">
    <div id="inner_column">
        <div class="section">
            <p>test</p>
        </div>
    </div>
</div>

CSS:

html {
    height: 100%;
}

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

#outer_column {
    width: 800px;
    margin: auto;
    height: 100%;
}

#inner_column {
    width: 700px;
    margin: auto;
    background: #000000;
    height: 100%;
}

.section{
    padding: 20px;
    background: #cccccc;
    width: 650px;
    margin: auto;
    position: relative;
    top: 20px;
}

更新: キャッシュの問題だと思います。上記は機能します。ありがとうございます。

更新 2: 実際には、高さは画面の高さだけであり、さらにコンテンツを追加すると、含まれる div が本体の高さに及ばないことがわかりました。次の jsfiddle のいずれかを更新しました: http://jsfiddle .net/Cuzr9/2 - コンテンツの量に関係なく、体の高さにまたがるようにする方法はありますか? ありがとうございました。