CSS div 100％の高さ

Question

私はこのwebsiteを開発しており、右側のサイドバーの高さを100％にします。 Setting 100% height on an absolutely positioned element when the content expands past the window size：

body { 
    height: 100%; 
    min-height: 100%; 
    position: relative; 
} 

mydiv { 
    height: 100%; 
    min-height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 290px; 
} 

は、私は答えの多くは、特にこの（Prestaulの答えを）読みました。

私にとってこのトリックはうまくいかず、フィドルの例文も機能しません！

This is the jsfiddle working example.

This is the same code that doesn't work.

Answer 1

にボディスタイルを設定してみてください：

body { position:relative;} 

それは私が別の提案を持っている私のため

Answer 2

すぎて、htmlタグを設定します。この方法では、奇妙な位置のハッキングは必要ありません。

html, body {height: 100%}

Answer 3

を働きました。あなたはmyDivは100％の高さを持つようにしたい場合は、あなたのdivにこれらの余分な3つの属性を使用します。

myDiv { 
    min-height: 100%; 
    overflow-y: hidden; 
    position: relative; 
} 

仕事をする必要があることを！

Answer 4

フレキシボックスソリューション

注：ごsupported browsersで必要な場合、フレックスベンダープレフィックスを追加します。

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    display: flex; 
 
} 
 

 
.Content { 
 
    flex-grow: 1; 
 
} 
 

 
.Sidebar { 
 
    width: 290px; 
 
    flex-shrink: 0; 
 
}

<div class="Content" style="background:#bed">Content</div> 
 
<div class="Sidebar" style="background:#8cc">Sidebar</div>