1

recurro a su ayuda, tengo un menu lateral, el cual necesito que ocupe el 100% del alto de la pagina. Estoy ocupando el formato de columnas que proporciona boostrap, pero resulta ser que si ocupo la propiedad position:fixed en la columna que corresponde al menu, la columna de la derecha queda detras y pegada a la izquierda de la ventana, necesito mantener la estructura de las columnas sin que se superpongan, pero que la de izquierda se mantenga ocupando el 100% en lo alto

<div class="container-fluid">
    <div class="row">
        <div class="col-xl-3 col-lg-4 col-md-6 p-0 menu" id="menu">         
            <div class="menu-body">
                <div class="menu-header">
                    <a href="<?php echo $raiz;?>"><img class="mt-2 img-menu" src="<?php echo $raiz;?>imagenes/logo.png" alt=""></a>
                    <i class="icon-cross1 text-white f-30 float-right mt-3 mr-1 d-md-block d-lg-none"></i>          
                </div>
                <div class="menu-perfil">
                    <img src="<?php echo $raiz;?>imagenes/avatar_hombre.png" class="m-3 avatar" alt="..." width="75">
                    <div>
                        <h5 class="m-0 jura">Jonathan Alarcón</h5>                      
                        <p class="m-0"><small><i class="icon-dot-single text-success f-25"></i>Online</small></p>               
                    </div>
                </div>
                <div class="menu-buscador px-3 py-2">
                    <div class="form-row">
                        <div class="col-12">
                            <label for="buscador_menu" class="label-resp">BUSCAR</label>
                            <input type="text" class="form-control form-control-resp" name="buscador_menu" id="buscador_menu">
                        </div>
                    </div>
                </div>          
                <div class="menu-contenido">
                    <ul class="nav flex-column">
                        <li class="nav-item encabezado p-2">GENERAL</li>
                        <li class="nav-item">
                            <a href="<?php echo $raiz;?>portal/ordenes" class="nav-link">Ordenes</a>
                        </li>
                        <li class="nav-item">
                            <a href="<?php echo $raiz;?>portal/subir-archivos" class="nav-link">Subir Archivos</a>
                        </li>
                        <li class="nav-item">
                            <a href="<?php echo $raiz;?>portal/comprar-creditos" class="nav-link">Comprar Créditos</a>
                        </li>
                        <li class="nav-item">
                            <a href="<?php echo $raiz;?>portal/estadisticas" class="nav-link">Estadísticas Vehículos </a>
                        </li>                           
                        <li class="nav-item encabezado p-2">ADMINISTRAR</li>
                        <li class="nav-item"><a class="nav-link" href="<?php echo $raiz;?>portal/mi-perfil">Mi Perfil</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Información</a></li>
                    </ul>
                </div>                      
            </div>  
            <div class="menu-footer py-2">
                <ul class="nav text-center">
                    <li class="nav-item"><a class="nav-item" href="#"><i class="icon-bell1"></i><span class="badge badge-pill badge-warning notification">3</span></a></li>
                    <li class="nav-item"><a class="nav-item" href="#"><i class="icon-mail1"></i><span class="badge badge-pill badge-success notification">7</span></a></li>
                    <li class="nav-item"><a class="nav-item" href="#"><i class="icon-cog"></i></a></li>
                    <li class="nav-item"><a class="nav-item" href="<?php echo $raiz;?>logica/login/cerrar_sesion.php"><i class="icon-log-out"></i></a></li>
                </ul>           
            </div>          
            
        </div>
        <div class="col-xl-9 col-lg-8">
            <div class="row d-lg-none d-md-block">
                <div class="col-12 p-0">
                    <nav class="header-menu px-3">
                        <a class="navbar-brand" href="<?php echo $raiz;?>">
                            <img src="<?php echo $raiz;?>imagenes/logo-negro.png" width="300" alt="" class="img-header">
                        </a>
                        <button class="btn navbar-toggler float-right mt-2" type="button" id="btn-menu"><i class="icon-menu1 text-black"></i></button>          
                    </nav>  
                </div>              
            </div>
            <div class="row bg-dark my-3 mx-2 rounded text-white p-4">              
                <div class="col-lg-4">
                    <p class="m-0 d-lg-block">BALANCE CRÉDITOS : <span id="creditos"></span></p>
                    <p class="m-0 d-lg-block">ARCHIVOS EN FILA : <span>0</span></p>
                    
                </div>
                <div class="col-lg-4 text-center">
                    <p class="m-0">EL TIEMPO ACTUAL PARA EL PROCESAMIENTO DE ARCHIVOS ES APROXIMADAMENTE 30 MIN</p>
                </div>
                <div class="col-lg-4">
                    <p class="m-0">HORA ACTUAL:</p>
                    <p class="d-inline-block" id="reloj"></p>
                    <p class="d-inline-block" id="fecha"></p>       
                    <p class="d-inline-block">Santiago, Chile</p>                   
                </div>
                <div class="col-12">
                    <p class="m-0 f-12 text-center">ESTIMADO CLIENTE, FAVOR SE LE RECOMIENDA GUARDAR LOS ARCHIVOS EN SU COMPUTADOR PERSONAL. NO SOMOS RESPONSABLES DE LA DISPONIBILIDAD PARA LA DESCARGA DE ARCHIVOS DESPUÉS DE 1 MES DE HABER REALIZADO EL PEDIDO</p>          
                </div>
            </div>
    </div>
    </div>

Aca los estilos que le aplico al menu.

.menu{
    z-index: 1000; 
    background-color: #000000;
    /*left: -100%; 
    display: none;*/ 
    top: 0; 
    -webkit-box-shadow: 5px 0px 10px 1px rgba(0,0,0,0.5); 
    -moz-box-shadow: 5px 0px 10px 1px rgba(0,0,0,0.5); 
    box-shadow: 5px 0px 10px 1px rgba(0,0,0,0.5); 
    font-family: 'Jura'; 
    color: #EAEAEA; 
    display: block; 
    height: 100vh; 
    position: fixed
}

introducir la descripción de la imagen aquí

1 respuesta 1

3

Cuando usas position fixed el elemento sale del flujo y queda como flotando y el siguiente elemento pasa a ocupar el lugar de este. Prueba asi:

.menu{
    z-index: 1000; 
    background-color: #000000;
    /*left: -100%; 
    display: none;*/ 
    top: 0; 
    -webkit-box-shadow: 5px 0px 10px 1px rgba(0,0,0,0.5); 
    -moz-box-shadow: 5px 0px 10px 1px rgba(0,0,0,0.5); 
    box-shadow: 5px 0px 10px 1px rgba(0,0,0,0.5); 
    font-family: 'Jura'; 
    color: #EAEAEA; 
    display: block; 
    height: 100vh; 
    position: sticky;
    top: 0;
}

position sticky no saca a los elementos del flujo, lo que hace es que el elemento se desplace desde su posicion hacia arriba cuando haces scroll y cuando llega al tope se pega. Por lo tanto si le pones top:0 ya estara al tope. Espero te funcione!!

1
  • Me a venido a la perfección, muchas gracias estimado. Commented el 17 abr. 2021 a las 22:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.