web-dev-qa-db-ja.com

CSS div 100％高さ

私はこれを開発しています website そして、右側のサイドバーの高さを100％にしたいです。

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の答え）です。 コンテンツがウィンドウサイズを超えて拡大するときに絶対位置の要素に100％の高さを設定する 。

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

これはjsfiddleの動作例です。

これは機能しない同じコードです

cssheightcss-position
25
T1T

ボディスタイルを次のように設定してみてください。

body { position:relative;}

それは私のために働いた

5
J Max

Htmlタグも設定します。このように、奇妙な位置ハックは必要ありません。

html, body {height: 100%}

44
MildlySerious

Flexboxソリューション

注：サポートされているブラウザ で必要な場合は、フレックスベンダープレフィックスを追加します。

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>
2
Reggie Pinkham

別の提案があります。 myDivの高さを100％にするには、divで次の3つの追加属性を使用します。

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

それは仕事をする必要があります！

0
Lars Ljungvist