I want to make a sidenav that is either full length of the screen or that is actually fixed, with only the right side of the screen scrolling. Somehow this is not working and the bar is ending abruptly when the right side's height is larger than the bar's. See sidenav not full screen the photo and code. Any ideas?
<!DOCTYPE html>
{% load staticfiles %}
{% load sass_tags %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>B L A C K S H E E P</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{% static 'css/master.css' %}">
<link href="{% sass_src 'scss/master.scss' %}" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="app">
<aside class="sidebar">
<header>
Menu
</header>
<nav class="sidebar-nav">
<ul>
<li>
<a href="#"><i class="fas fa-user-circle"></i> <span>Usuarios</span></a>
<ul class="nav-flyout">
<li>
<a href="{% url 'usuarios:signup' %}"><i class="fas fa-user"></i>Crear Usuario</a>
</li>
<li>
<a href="{% url 'usuarios:login' %}"><i class="fas fa-arrow-alt-circle-up"></i>Login</a>
</li>
<li>
<a href="{% url 'usuarios:logout' %}"><i class="fas fa-arrow-alt-circle-down"></i>Logout</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-list-alt"></i> <span class="">Compras</span></a>
<ul class="nav-flyout">
<li>
<a href="{% url 'ingresos:crear_oc' %}"><i class="fa fa-list-ol"></i>Crear OC</a>
</li>
<li>
<a href="{% url 'ingresos:lista_oc' %}"><i class="fas fa-edit"></i>Administrar OCs</a>
</li>
<li>
<a href="{% url 'proveedores:crear_proveedor' %}"><i class="fas fa-truck"></i>Crear Proveedor</a>
</li>
<li>
<a href="{% url 'proveedores:lista_proveedores' %}"><i class="fa fa-list-ol"></i>Administrar Proveedores</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fas fa-warehouse"></i> <span class="">Almacén</span></a>
<ul class="nav-flyout">
<li>
<a href="{% url 'items:crear_item' %}"><i class="fas fa-box"></i>Crear Item</a>
</li>
<li>
<a href="{% url 'items:lista_items' %}"><i class="fas fa-edit"></i>Administrar Items</a>
</li>
<li>
<a href="{% url 'ingresos:crear_ingreso' %}"><i class="fas fa-dolly"></i>Crear Ingreso de Mercadería</a>
</li>
<li>
<a href="{% url 'ingresos:lista_ingresos' %}"><i class="fas fa-edit"></i>Administrar Ingresos</a>
</li>
<li>
<a href="{% url 'egresos:crear_egreso' %}"><i class="fas fa-truck-loading"></i>Crear Egreso de Mercadería</a>
</li>
<li>
<a href="{% url 'egresos:lista_egresos' %}"><i class="fas fa-edit"></i>Administrar Egresos de Mercadería</a>
</li>
<li>
<a href="{% url 'items:ver_stocks' %}"><i class="fas fa-clipboard-check"></i>Ver Inventario</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fas fa-hand-holding-usd"></i> <span class="">Ventas</span></a>
<ul class="nav-flyout">
<li>
<a href="{% url 'clientes:crear_cliente' %}"><i class="fas fa-user-friends"></i>Crear Cliente</a>
</li>
<li>
<a href="{% url 'clientes:lista_clientes' %}"><i class="fas fa-edit"></i>Administrar Clientes</a>
</li>
<li>
<a href="#"><i class="fas fa-hand-holding-usd"></i>Crear Venta</a>
</li>
<li>
<a href="#"><i class="fas fa-edit"></i>Administrar Ventas</a>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
<div class="main">
{% block content %}
<img src="{% static 'images/blacksheep.jpg' %}" id='logo_intro' alt="">
<div class="subtitle_homepage">
<h2>SISTEMA DE GESTIÓN DE STOCKS V. 1.0 </h2>
<p>Blacksheep Peru©</p>
{% if user.is_authenticated %}
<h4>Bienvenid@ <a href="#"><strong>@{{user.username}}</strong></a></h4>
{% endif %}
</div>
{% endblock %}
</div>
</section>
<!-- <div class="sidenav">
<a href="#">Usuarios</a><br>
<a href="{% url 'usuarios:signup' %}">Crear</a><br>
<a href="{% url 'usuarios:login' %}">Login</a><br>
<a href="{% url 'usuarios:logout' %}">Logout</a><br>
{% if user.is_authenticated %}
<a href="#">Ingresos</a><br>
<a href="{% url 'items:crear_item' %}">Crear artículo</a><br>
<a href="{% url 'proveedores:crear_proveedor' %}">Crear proveedor</a><br>
<a href="{% url 'ingresos:crear_oc' %}">Crear Orden de Compra</a><br>
<a href="{% url 'ingresos:lista_oc' %}">Administrar OC</a><br>
<a href="{% url 'proveedores:lista_proveedores' %}">Administrar proveedores</a><br>
<a href="{% url 'items:lista_items' %}">Administrar artículos</a><br>
<a href="{% url 'ingresos:crear_ingreso' %}">Ingreso mercadería</a><br>
<a href="{% url 'ingresos:lista_ingresos' %}">Administrar Ingresos</a><br>
<a href="#">Egresos</a><br>
<a href="#">Crear Venta</a><br>
<a href="#">Ver Ventas</a><br>
<a href="{% url 'egresos:crear_egreso' %}">Registrar Egreso de Mercadería</a><br>
<a href="{% url 'items:ver_stocks' %}">Inventario Actual</a><br>
<a href="{% url 'clientes:crear_cliente' %}">Crear cliente</a><br>
<a href="#">Administrar clientes</a><br>
<a href="{% url 'egresos:crear_egreso' %}">Egreso mercadería</a><br>
<a href="#">Administrar Egresos</a>
<a href="#">Ajustes</a><br>
{% endif %}
</div> -->
</body>
</html>
