исправить сиденав - полная длина - PullRequest
Новая
       23

исправить сиденав - полная длина

1 голос
/ 05 ноября 2019

Я хочу сделать sidenav, который будет либо на всю длину экрана, либо на самом деле фиксирован, с помощью только правой стороны прокрутки экрана. Каким-то образом это не работает, и полоса резко заканчивается, когда высота правой стороны больше, чем полоса. Смотрите sidenav не полный экран фото и код. Есть идеи? 

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

1 Ответ

1 голос
/ 05 ноября 2019

Вы должны сделать свою боковую панель position: fixed. Это удалит боковую панель из потока документа по умолчанию. Затем вы можете расположить его относительно области просмотра, используя свойства top, bottom и left.

Попробуйте добавить / обновить эти свойства в таблице стилей: 

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px; /* Insert whatever width you want here. */
}
...