css - CSS div 100％高さ

Question

私はこのウェブサイトを開発していて、右側のサイドバーの高さを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の動作例です。

これは、機能しないのと同じコードです。

score 52 · Accepted Answer

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

html, body {height: 100%}

score 6 · Accepted Answer

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

body { position:relative;}

それは私のために働いた

score 6 · Accepted Answer

CSS 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>

score 1 · Accepted Answer

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

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

それでうまくいくはずです！

score 0 · Accepted Answer

この戦略は私にとって最も効果的です。

div.full {
  width: 100wh;
  height: 100vh;
}

フルスクリーンコンテナを作成します。

css - CSS div 100％高さ

5 に答える 5

Related

Reference