液体容器で全体の高さを記入してください

Question

これは簡単な修正ですが、わかりません。私はコンテナ流体クラスをウィンドウの一番下まで伸ばそうとしていますが、うまくいきません。私は

Height not 100% on Container Fluid even though html and body are

から適用するすべてのものを試してみましたが、それのどれも機能しません。ここに私のHTMLとCSSは次のとおりです。

HTML：

<div class="container-fluid fill-height"> 
    <h1 class="text-center">WikiGen</h1> 

    <div class="row fill-height"> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
     <label class="align-top">Search for an article:</label> 
    </div> 
    </div> 

    <div class="row fill-height"> 
    <div class="col-md-3"> 
    </div> 
    <div class="col-md-3"> 
     <label class="align-top">Or, pick one at random:</label> 
    </div> 
    <div class="col-md-3"> 
     <a href="https://en.wikipedia.org/wiki/Special:Random"> 
     <img id = "dice" src="https://lh3.ggpht.com/kOal-qldAR-YwTvStekh0NbGnwUz-kB5idDv97ZOODRZnxKCs-52YNHLkZX3Ttbjv890=w300"/> 
     </a> 
    </div> 
    <div class="col-md-3"> 
    </div> 
    </div> 
</div> 

CSS：

.fill-height { 
    min-height: 100%; 
    height:auto !important; 
    height: 100%; 
} 
.container-fluid { 
    background: grey; 
} 
h1 { 
    font-family: "Indie Flower"; 
    font-size: 100px; 
} 
h3 { 
    margin: 10px; 
    font-size: 20px; 
} 
label{ 
    display: inline-block; 
    float: right; 
    clear: left; 
    width: 250px; 
    font-size: 18px; 
    margin: 5.5px; 
    text-align: right; 
} 
input { 
    margin: 5px; 
    width: 300px; 
    float: left; 
} 
.col-md-3 { 
/* background: black; */ 
} 
#dice { 
    width: 50px; 
    height: 50px; 
    margin-top: -5px; 
    margin-left: 40px; 
    mix-blend-mode: multiply; 
} 
.row { 
    margin-bottom: 50px; 
} 
#button { 
    margin-top: 2px; 
} 

Answer 1

簡単な修正 - あなたはの高さにhtmlとbody要素を設定したスタイルを追加する必要があります100％。あなたのCSSにこれを追加し、それは問題ないはずです。

html, body { 
    height: 100% 
} 

Answer 2

あなたは、ビューの高さを利用することができ、ここで

.fill-height{ 
    height: 100vh; 
} 

あなたは親要素の高さを設定することができます（コンテナ流体でもよい）に子要素の高さをそれに応じて に設定し、viewport-sized-typographyをご覧ください。

Answer 3

100vhメソッドを使用します。 CSS vhでは、ブラウザウィンドウの目に見える高さを意味します。画面上に現在表示されていないものも含め、ページの全長に基づいているため、高さにパーセンテージを使用することはお勧めしません。また、ブラウザウィンドウの表示可能な高さの60％に相当する60vhなどの値を設定することもできます。