html - 修复sidenav-全长-6ren

html - 修复sidenav-全长

转载作者：行者123 更新时间：2023-11-28 13:55:16

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

文章推荐： css - 如何在用户滚动查看时设置动画

文章推荐： java - 如何从JSP运行jar文件？

文章推荐： css - 3 列流体分区显示故障 : "Hanging" Individual Divs

文章推荐： html - 网站屏幕分辨率自动分辨率

html - 修复sidenav-全长
我想制作一个sidenav，它可以是整个屏幕的长度，也可以是固定的，只滚动屏幕的右侧。不知何故，当右侧的高度大于钢筋的高度时，钢筋突然终止。请参见sidenav not full screen照片和代
c++ - 如何打印长双(全长)C++
这个问题在这里已经有了答案: How do I print a double value with full precision using cout? (17 个答案) 关闭 9 年前。我有一个
html - 表格行在第一个表格中没有拉伸(stretch)全长，在第二个表格中它做得很好
在下面的代码中，我的第一个表行没有拉伸(stretch)到满，这令人沮丧。虽然第二张 table 很好并且可以按预期拉伸(stretch)。有人可以引用我的原因并帮助解决它吗？ body {paddi
ios - 全长 URL "edit"使用 NSMakeRange
我正在尝试从中删除一个 URL: http://www.huffingtonpost.com/2013/08/01/edward-snowden-russia_n_3688225.html 为此: h
css - 打印 Textarea 文本 - 全长(高度)？
我有一个网络表单，我的客户希望用户能够打印出来。它可以很好地使用 CSS 进行一些样式设置，但是，我有几个 textaear 字段。如果用户键入的内容超过文本区域的高度，则该类型在打印时会被截断。我
html - Bootstrap 4 & 全长 hr 列
我想让一条水平线延伸到 Bootstrap 父元素指定的列宽。我正在使用 Bootstrap 4.1.1。代码如下。 Something here!

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 修复sidenav-全长