0

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:

introducir la descripción de la imagen aquí

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.

3
  • a que te refieres cuando dices que no se desplaza con el contenido, como deberia funcionar? Commented el 22 jun. 2018 a las 1:02
  • Podrías ser más claro con la pregunta? Por lo aud veo en la imagen entiendo que lo que buscas es que el área de texto se ajuste de manera tanto horizontal como vertical dentro de los marcos pero no queda muy claro en el texto de la pregunta
    – Killbunny
    Commented el 22 jun. 2018 a las 1:17
  • Como se ve al final de la imagen, el menú lateral llega hasta cierto punto, lo que quiero es que mi menú cambie de tamaño dependiendo del contenido que aparece al lado derecho. Y que no quede "disparejo" a la hora de cambiar la resolución. Espero me haga entender.
    – CamiloJc
    Commented el 22 jun. 2018 a las 1:35

2 respuestas 2

0

agrega al div superior a las columnas que quieres ajustar una clase nueva, en este caso container

<div class="container row bg-light h-100">

y en estilos agrega:

.container{
  display: flex;
  align-items: stretch;
}

y con eso deben ajustarser.

Saludos

0

A través de del 'height' en 'css' puedes darle una altura que se corresponda siempre con el 100% de la pantalla al contenedor del menu lateral. Este caso te recomendaría para asegurar que siempre será así un 'height:100vh', quedando en tu código css del siguiente modo:

#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;
  heigtht: 100vh;
}

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.