Skip to main content
height
Origen Enlace
Carlos Mendez
  • 261
  • 1
  • 4
  • 11

Estoy tratando de diseñar un dashboard, el problema es con el menu, el tamaño del menu quiero que se ponga en headingheight:100% intenté varias formas de hacerlo, pero no tengo éxito.

Para Para poder ver mi el ejemplo en pantalla completa.

Estoy tratando de diseñar un dashboard, el problema es con el menu, el tamaño del menu quiero que se ponga en heading:100% intenté varias formas de hacerlo, pero no tengo éxito.

Para poder ver mi el ejemplo en pantalla completa.

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.

Origen Enlace
Carlos Mendez
  • 261
  • 1
  • 4
  • 11

Problema con la altura de barra de navegación

Estoy tratando de diseñar un dashboard, el problema es con el menu, el tamaño del menu quiero que se ponga en heading: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í