I am currently working on a Django project and I am in the process of integrating Bootstrap into my HTML files. One issue I am facing is that the row in my HTML template is only as big as its content, but I want it to take up the entire height of the page and fill the page completely. I have tried using standard CSS but it's not working. Is there a way to force it to fill the page? Additionally, I would like to know if there is a way to keep a row fixed in its position so it does not move when scrolling up and down.
Specifically, I want the first row to be fixed and the two side columns in the second row to occupy the remaining space on the screen.
Below is a snippet from the HTML template:
{% 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 %}