ページ全体の高さを取るようにブートストラップ行を強制する

Question

私が作業しているdjangoプロジェクトがあり、私は自分のhtmlファイルにブートストラップを統合しています。私のhtmlテンプレートの中には、行の中身と同じ大きさの行しかありません。私はそれがページの高さ全体を取り、ページを完全に埋めるようにしたい。私は標準的なCSSを試して、それは全く動作していません。それを強制する方法はありますか？私が持っているもう一つの質問は、行の位置を固定して、上下にスクロールするときに動かないようにする方法があるかどうかです。

Iは最初の行が画面の残りの部分を取るために2行目の

両側列を固定したいです。ここで

は、HTMLテンプレートです：要素にheight: 100vhを追加

{% extends "base.html" %} 
{% load staticfiles %} 

{% block standard %} 
<div class="row"> 
    <div class=" border-padding solid-borders"> 
    <a href="{% url 'user_groups' %}"> 
     <img src="{% static 'images/Yap-Logo-6.png'%}" class="header-icon-size" alt=""> 
    </a> 
    </div> 
    ... 
    <div class="col-3"> 
    </div> 
    <div class="border-padding solid-borders"> 
    <a href=""> 
     <img src="{% static 'images/user.png'%}" class="header-icon-size" alt=""> 
    </a> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-4 content-backgroun"> 
    </div> 
    <div class="col"> 
    {% block content %} 
    {% endblock %} 
    </div> 
    <div class="col-4 content-backgroun"> 
    </div> 
</div> 
{% endblock %} 

Answer 1

は、ビューポートの高さの100％高さだようになります。

あなたはそれが行きたい要素を配置するページ、使用top、left、right、およびbottomプロパティにそれを「固執」しposition: fixedを使用して、ページに要素を固定するために。

ありニュアンスの多くは、あなたのCSSの残りが書かれているどのようにしているが、一般的に言って、position: fixedは、ページに要素を固執するとvhユニットを使用すると、あなたはどのように背の高いユーザーのに基づいて要素の高さを調整することができますビューポートはです。

クイック例を以下：

.row-fixed { 
 
    position: fixed; 
 
    top:0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: salmon; 
 
} 
 
.row-tall { 
 
    height: 100vh; 
 
    background: linear-gradient(to top right, lightgreen, lightyellow); 
 
} 
 
.row { 
 
    padding: 2em 5%; 
 
} 
 
body { 
 
    margin: 6em 0 0 0; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
}

<div class="row row-tall"> 
 
    <h1>This row is 100% of the viewport's height.</h1> 
 
</div> 
 

 
<div class="row row-tall"> 
 
    <h2>This row is <i>also</i> 100% of the viewport's height and is only here to fill vertical space.</h2> 
 
</div> 
 

 
<div class="row row-fixed"> 
 
    <p>This is fixed to the top</p> 
 
</div>