Tengo un inconveniente con mi página a la hora de agregar contenido. El problema me resulta cuando se va cambiando las resoluciones del navegador, el contenido al desplazarse deja mi menú lateral hasta cierto punto y no se desplaza con el contenido, aquí una imagen de ello:
He intentado de todo hasta el momento, cambiando el tamaño del height
, pero no logro solucionarlo, aquí está mi código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Estilos locales y fuentes locales-->
<link rel="stylesheet" type="text/css" href="css/local/style_menu_principal.css">
<link rel="stylesheet" type="text/css" href="css/local/fuentes.css">
<link rel="Shorcut Icon" type="image/x-icon" href="icons/ico/Icono.ico">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css">
<title>Brillantex | Menú Principal</title>
</head>
<body class="normal">
<nav class="fixed-top gradient navbar">
<a class="ml-sm-5 mx-auto navbar-brand" href="#">
<img src="icons/png/Logo_Brillantex.png" width="100" height="50" alt="">
</a>
<a id="logo-login" class="d-none d-sm-block mr-5 navbar-brand" href="#">
<img src="icons/png/Login.png" width="40" height="40" alt="">
</a>
</nav>
<div class="d-block container-fluid h-100">
<div class="row bg-light h-100">
<div id="menu-left" class="d-none d-md-block text-center">
<a href="#">
<div style="margin-left: -100px;" class="mt-5">
<img src="icons/png/Perfil.png" width="40" height="40" alt="">
<span class="ml-2"> Perfil </span>
</div>
</a>
<a href="#">
<div class="mt-4" style="margin-left: -70px;">
<img src="icons/png/Registrar_Usuario.png" width="40" height="40" alt="">
<span class="ml-2"> Usuarios </span>
</div>
</a>
<a href="#">
<div style="margin-left: -50px;" class="mt-4 ">
<img src="icons/png/Empleado.png" width="40" height="40" alt="">
<span class="ml-2"> Empleados </span>
</div>
</a>
</div>
<div id="menu" class="col text-center">
<!--<img src="icons/png/Logo_Brillantex.png" alt="">-->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum ab iusto voluptatibus aspernatur quo totam odio fugit explicabo mollitia praesentium? Eius, praesentium ullam? Consequuntur, maxime laudantium. Alias molestiae adipisci velit!
Distinctio nostrum iusto sit molestias accusamus suscipit voluptatem obcaecati alias. Modi harum unde atque dolorum nisi dicta voluptas eaque? Sint cum obcaecati accusamus ea et dolorum harum, optio nemo atque.
Natus voluptatem laborum, quasi impedit nostrum id saepe quod unde repellendus! Omnis iusto ea odit, placeat, aspernatur sint dolorum nihil accusamus accusantium voluptatum voluptatem at obcaecati ex voluptate, libero atque!
Soluta cupiditate quos reprehenderit rerum voluptatum consequatur ab impedit, repellat natus aut ipsa magnam mollitia maxime, modi reiciendis molestiae fuga ducimus, dolores sunt commodi dolore. Quam numquam voluptates consequuntur molestiae?
Eaque dolor quo iste deleniti placeat fugiat tempore officia dignissimos, natus dolores voluptatem tenetur iure officiis culpa ut doloribus minima repellendus nam eius quisquam error, sed quaerat voluptatibus temporibus! Sequi.
Eum fugit quisquam dolorum doloribus ipsa. Nisi velit fuga, sint doloremque iusto quas, tempora odit delectus, accusantium quam ipsum autem! Molestiae fugiat ad commodi nulla eaque quos voluptatibus, facere tempora.
Laborum error veritatis mollitia itaque excepturi voluptatem tenetur et odit, nisi minus quam repellat eveniet nulla quidem dolorum animi placeat aliquam qui ducimus nihil omnis labore! Praesentium autem cum est?
Eum adipisci magnam blanditiis, autem dignissimos vitae aut quos quibusdam reprehenderit, fugit aspernatur veniam laboriosam assumenda sint iure voluptatibus facilis labore eveniet. Omnis blanditiis dignissimos nam minus. Ab, corrupti veniam?
Modi deserunt atque omnis, perferendis error obcaecati quae doloribus sed tempora molestiae sit, molestias iste? Dolorem vitae corporis tempora optio sed magni ipsa, nostrum temporibus, voluptate officiis quasi sunt dolores.
Commodi rem quae cum labore itaque dolores facilis rerum illum necessitatibus id ut, quod iste. Asperiores ad beatae dolores, illum, perspiciatis quo ab id quos molestiae sint quaerat, rem aspernatur?
</p>
</div>
</div>
</div>
</body>
</html>
CSS:
html,body{
height: 100%;
}
.gradient{
background-color: #FFC428;
background-image: -webkit-linear-gradient(left, #FFC428, #FF834D);
background-image: linear-gradient(left, #FFC428, #FF834D);
border-color: inherit;
}
#boton_Ingresar{
background-image: -webkit-linear-gradient(left, #FFC428, #FF834D);
background-image: linear-gradient(left, #FFC428, #FF834D);
border-color: inherit;
}
#logo-login:hover{
opacity: 0.7;
}
#menu{
margin-top: 75px;
justify-content: center;
display: flex;
align-items: center;
}
#menu img{
opacity: 0.5;
}
#menu-left{
background-color: #FFC428;
background-image: -webkit-linear-gradient(top, #FFC428, #FF834D);
background-image: linear-gradient(top, #FFC428, #FF834D);
border-color: inherit;
width: 280px;
margin-top: 75px;
}
#menu-left a{
color: #ffffff;
text-decoration: none;
}
#menu-left a div:hover{
background-color: rgba(255, 198, 40, 0.596);
}
#menu_empleados{
margin-top: 75px;
justify-content: center;
display: flex;
align-items: center;
}
#menu_empleados a{
color: hsl(0, 1%, 14%);
text-decoration: none;
}
#menu_empleados a:hover{
opacity: 0.5;
}
La verdad sigo investigando pero espero puedan ayudarme con este inconveniente. Gracias.