Force la ligne d'amorçage pour prendre toute la hauteur de la page

Question

J'ai un projet django sur lequel je travaille et j'intègre bootstrap dans mes fichiers html. Dans mon modèle html, j'ai une ligne qui est seulement aussi grande que le contenu à l'intérieur de la ligne. Je veux le faire prendre toute la hauteur de la page et remplir complètement la page. J'ai essayé le standard css et ça ne marche pas du tout. Y a-t-il un moyen de le forcer? Une autre question que j'ai est de savoir s'il y a un moyen pour moi de fixer la position d'une rangée de sorte qu'elle ne bouge pas lorsque je fais défiler vers le haut et vers le bas.

Je veux la première rangée à fixer

les deux colonnes latérales dans la deuxième rangée de prendre le reste de l'écran.

Voici le modèle html:

{% 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

Ajout height: 100vh à un élément fera sa hauteur de 100% de la hauteur de la fenêtre.

Pour fixer un élément à la page, utilisez position: fixed à « coller » à la page, l'utilisation top, left, right et propriétés bottom pour positionner l'élément où vous voulez qu'il aille. Il y a beaucoup de nuances dans la façon dont le reste de votre CSS est écrit, mais en général, position: fixed va coller des éléments à la page et en utilisant vh unités vous permettra d'ajuster la hauteur des éléments en fonction de la taille de l'utilisateur de viewport est.

Exemples rapides ci-dessous:

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