个人中心
gpt4 book ai didi

html - 修复sidenav-全长

转载 作者：行者123 更新时间：2023-11-28 13:55:16 25 4
gpt4 key购买 nike

我想制作一个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>

最佳答案

您应该将侧边栏设置为position: fixed。这将从默认的文档流中删除边栏。然后，可以使用top，bottom和left属性将其相对于视口定位。

尝试在样式表中添加/更新这些属性：

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

关于html - 修复sidenav-全长，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58716899/

25 4 0
文章推荐： css - 如何在用户滚动查看时设置动画
文章推荐： java - 如何从JSP运行jar文件？
文章推荐： css - 3 列流体分区显示故障 : "Hanging" Individual Divs
文章推荐： html - 网站屏幕分辨率自动分辨率
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com