0

Estoy tratando de diseñar un dashboard, el problema es con el menu, el tamaño del menu quiero que se ponga en height:100% intenté varias formas de hacerlo, pero no tengo éxito. Para poder ver mi el ejemplo en pantalla completa.

@import url("https://fonts.googleapis.com/css?family=Nunito:400,800");
html {
  height: 100%; }

@media (min-height: 768px) {
  body {
    height: 100%; } }

#app {
  height: 100%;
  font-family: Nunito, sans-serif;
  background: #2abbb9; }

#app .container,
#app .columns {
  height: 100%; }

#app .menu {
  height: 100%;
  background: red; }


.menu-list__main li {`introducir el código aquí`
  padding: 0.5rem 0; }
  .menu-list__main li .fas, .menu-list__main li .far {
    width: 35px;
    font-size: 1.3rem;
    padding-right: 0.9rem; }
  .menu-list__main li a {
    color: #fff;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.1rem;
    font-weight: 800;
    opacity: 0.6; }
  .menu-list__main li a.active {
    opacity: 1.0; }
  .menu-list__main li a:hover {
    background-color: inherit;
    color: #FFF;
    opacity: 1.0; }

.menu-list__outlier {
  margin-top: 10.0rem; }

#app .dashboard {
  height: 100%;
  width: 100%;
  background: #f9fafb; }

.dashboard__content {
  height: 100%;
  width: 80%;
  margin: 0 auto; }
  .dashboard__content .header {
    display: block;
    height: 100px;
    margin-top: 3.0rem; }
  .dashboard__content .row {
    margin: 1.0rem 0; }
  .dashboard__content .bottom-row {
    margin-bottom: 3.0rem; }



.flex-center, #app, .menu-list__profile, #app .dashboard {
  display: flex;
  justify-content: center;
  align-items: center; }

@media (max-width: 1216px) {
  .menu-list__profile {
    flex-direction: column; }
    .menu-list__profile .title {
      padding-top: 0.5rem; }
    .menu-list__profile .subtitle {
      padding-top: 0; }

  .media-content {
    text-align: center; }

  .card .card-content {
    padding: 1.0rem; }
  .card .card .title {
    font-size: 0.7rem; }
  .card .content {
    font-size: 0.9rem;
    padding-bottom: 1.5rem; } }
@media (min-width: 768px) {
  #app .container {
    width: 100%;
    max-width: 100%; }

  .dashboard__content {
    display: flex;
    flex-direction: column;
    justify-content: center; } }
@media (min-width: 720px) {
  .columns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

  .columns > .column.is-3 {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 25%; } }
@media (min-width: 720px) and (max-width: 840px) {
  .menu-list__profile .subtitle {
    font-size: 0.6rem; }

  .menu-list__main li .fas {
    font-size: 1.1rem !important; }

  .menu-list__main li a {
    font-size: .60rem !important; } }
@media (max-width: 720px) {
  #app .container {
    width: 100%; }

  .menu-list__main {
    display: none; }
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ejemplo</title>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css'>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="columns is-gapless">
                <div class="column is-3">
                    <aside class="menu">
                        <ul class="menu-list">
                            <div class="menu-list__profile media">
                                <div class="media-content">
                                    <p class="title is-5 font-color-white">Usuario</p>
                                </div>
                            </div>
                            <div class="menu-list__main is-uppercase has-text-left">
                                <li><a class="subtitle is-7">Opcion</a></li>
                            </div>
                        </ul>
                    </aside>
                </div>
                <div class="column">
                    <div class="dashboard">
                        <p>Hola Mundo</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Lo que intento hacer es que me ocupe todo el largo de la pantalla:

introducir la descripción de la imagen aquí

2
  • talvez tratas de decir height:100% en lugar de heading:100%? Commented el 9 jul. 2018 a las 22:32
  • Si, gracias. :3 Commented el 9 jul. 2018 a las 22:33

1 respuesta 1

0

Debes agregar en la hoja de estilos donde quieras que se vea la pantalla completa el código:

height: 100vh; 

Eso hará que ocupe todo el ancho de la pantalla sin importar el tamaño de la misma.

3
  • te saludo y te doy la bienvenida, te comento tu respuesta aunque pudiera guiar al OP es de muy baja calidad pues no explicas el por que ni das un contexto mas amplio, te sugiero leer como responder Cómo responder y del mismo modo hagas el tour para que te familiarices con el sitio saludos recorrido de bienvenida
    – user75901
    Commented el 9 jul. 2018 a las 23:06
  • Gracias, funcionó de maravilla! Commented el 9 jul. 2018 a las 23:09
  • Hola ChristianDaza, aunque esta respuesta resuelve el problema de la pregunta, ha sido reportada como de baja calidad por la comunidad. Deberías editarla para darle un formato algo diferente (tal y como está escrita ahora no pareces muy convencido de que vaya a funcionar) y añadir más información (¿por qué vh funciona y no %? ¿dónde iría el height: 100vh en el código de la pregunta?). Lee Cómo responder para más información y completa el recorrido de bienvenida para aprender más sobre el sitio (y co ello ganar una nueva medalla).
    – Alvaro Montoro
    Commented el 10 jul. 2018 a las 12:06

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.