我想制作一个sidenav，它既可以是屏幕的整个长度，也可以是固定的，仅滚动屏幕的右侧。不知何故，当右侧的高度大于钢筋的高度时，钢筋突然终止。请参见sidenav not full screen照片和代码。有什么想法吗？
<!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>
答案 0 :(得分：1)
您应该将侧边栏设为position: fixed。这将从默认的文档流中删除边栏。然后，您可以使用顶部，底部和左侧属性将其相对于视口定位。
尝试在样式表中添加/更新这些属性：
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 300px; /* Insert whatever width you want here. */
}