0

estoy tenieno problemas al hacer scroll, ya que cuando este termina, me corta mis divs, card o text y no los termina de mostrar como es debido.

Aqui dejo una imagen del problema:

introducir la descripción de la imagen aquí

Este es el codigo css que actualmente estoy utilizando para darle estilos a la plantilla que me encuentro diseñando.

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

@font-face {
  font-family: GreatWishes;
  src: url(../fonts/Diverplate.ttf);
}

.cuerpo .asidex .mi-menu {
  height: 100vh;
  background: #0e0e0e;
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* IE 11 */
  scrollbar-width: none;
}

.cuerpo .asidex .mi-menu .menu {
  font-size: 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.cuerpo .asidex .mi-menu .menu .menu-label {
  margin-top: 10px;
  margin-left: 12px;
}

.cuerpo .asidex .mi-menu .menu .menu-list a {
  font-size: 12px;
}

.cuerpo .asidex .mi-menu .menu .menu-list a .icon {
  font-size: 8px;
}

.cuerpo .asidex .mi-menu .menu .menu-list a:hover {
  border-radius: 0;
  -webkit-transition: 1s;
  transition: 1s;
  background: #242424;
  color: #f2f2f2;
}

.cuerpo .asidex .mi-menu .menu .menu-list a:hover .icon {
  color: #276daf;
  -webkit-transition: 1s;
  transition: 1s;
}

.cuerpo .asidex .mi-menu::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  display: none;
  /* Chrome y Edge */
}

.cuerpo .headerx .navbar {
  -webkit-box-shadow: 0px 2px 2px -2px #a0a0a0;
          box-shadow: 0px 2px 2px -2px #a0a0a0;
}

.cuerpo .headerx .navbar .navbar-brand .navbar-item .boton-responsive {
  color: #000;
}

.cuerpo .headerx .navbar .navbar-brand .navbar-item .boton-responsive:hover {
  color: #e25e11;
}

.cuerpo .headerx .navbar .navbar-brand .navbar-item .cristiangarcia {
  font-family: GreatWishes;
}

.cuerpo .headerx .navbar .navbar-menu .navbar-start .navbar-item .field .control {
  width: 450px;
}

.cuerpo .headerx .navbar .navbar-menu .navbar-start .navbar-item .field .control .input-searchx {
  background-color: #f2f2f2;
}

.cuerpo .headerx .mi-main {
  max-height: 100vh;
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* IE 11 */
  scrollbar-width: none;
  /* Firefox 64 */
}

.cuerpo .headerx .mi-main .main-section {
  padding: 20px;
}

.cuerpo .headerx .mi-main .main-section .contenedor-minititle {
  color: #363636;
  cursor: pointer;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: calc(0.5em - 1px);
  padding-left: 1em;
  padding-right: 1em;
  padding-top: calc(0.5em - 1px);
  white-space: nowrap;
}

.cuerpo .headerx .mi-main::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  display: none;
  /* Chrome y Edge */
}

Este es el codigo html el cual estoy utilizando en la plantilla que estoy diseñando:

<main>
    <div class="columns is-gapless cuerpo">
        <!-- ESTA ES LA COLUMNA DEL ASIDE-->
        <div class="column is-2 asidex" id="target">
            <div class="navbar is-link">
                <div class="navbar-brand">
                    <div class="navbar-item">
                        <p class="title is-6 has-text-white">MENU</p>
                    </div>
                    <div class="navbar-item mi-boton">
                        <button id="boton2" class="button is-small">
                            <span class="icon is-small">
                                <i class="fas fa-bars"></i>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
            <aside class="mi-menu">
                <div class="menu">
                    <p class="menu-label">GENERAL</p>
                    <ul class="menu-list">
                        <a href="">
                            <span class="icon is-small">
                                <i class="fas fa-circle"></i>
                            </span>
                            <span>Dashboard</span>
                        </a>
                        <a href="">
                            <span class="icon is-small">
                                <i class="fas fa-circle"></i>
                            </span>
                            <span>Dashboard</span>
                        </a>
                    </ul>
                    <p class="menu-label">AYUDA</p>
                    <ul class="menu-list">
                        <a href="">
                            <span class="icon is-small">
                                <i class="fas fa-circle"></i>
                            </span>
                            <span>Dashboard</span>
                        </a>
                        <a href="">
                            <span class="icon is-small">
                                <i class="fas fa-circle"></i>
                            </span>
                            <span>Dashboard</span>
                        </a>
                    </ul>

                    <p class="menu-label">GENERAL</p>
                    <ul class="menu-list">
                        <a href="">
                            <span class="icon is-small">
                                <i class="fas fa-circle"></i>
                            </span>
                            <span>Dashboard</span>
                        </a>
                        <a href="">
                            <span class="icon is-small">
                                <i class="fas fa-circle"></i>
                            </span>
                            <span>Dashboard</span>
                        </a>
                    </ul>

                    <p class="menu-label">GENERAL</p>
                    <ul class="menu-list">
                        <a href="">
                            <span class="icon is-small">
                                <i class="fas fa-circle"></i>
                            </span>
                            <span>Dashboard</span>
                        </a>
                        <a href="">
                            <span class="icon is-small">
                                <i class="fas fa-circle"></i>
                            </span>
                            <span>Dashboard</span>
                        </a>
                    </ul>

                    <p class="menu-label">GENERAL</p>
                    <ul class="menu-list">
                        <a href="">
                            <span class="icon is-small">
                                <i class="fas fa-circle"></i>
                            </span>
                            <span>Dashboard</span>
                        </a>
                        <a href="">
                            <span class="icon is-small">
                                <i class="fas fa-circle"></i>
                            </span>
                            <span>Dashboard</span>
                        </a>
                    </ul>

                </div>
            </aside>
        </div>
        <!-- FIN DE LA COLUMNA DEL ASIDE -->

        <!-- ESTE ES LA COLUMNA DEL HEADER Y MAIN -->
        <div class="column headerx">

            <!-- NAVBAR-->
            <nav class="navbar" role="navigation" aria-label="main navigation">
                <div class="navbar-brand">
                    <div class="navbar-item">
                        <a id="boton" class="boton-responsive">
                            <span class="icon is-medium">
                                <i class="fas fa-bars"></i>
                            </span>
                        </a>
                    </div>
                    <div class="vl" style="border-left: 1px solid #dbdbdb; height: 100%;">
                    </div>
                    <a class="navbar-item" href="https://bulma.io">
                        <h1 class="title is-3 cristiangarcia">IMCRISGARCIA</h1>
                    </a>
                </div>
                <div class="navbar-menu">
                    <div class="navbar-start" style="flex-grow: 1; justify-content: center;">
                        <div class="navbar-item">
                            <div class="field">
                                <div class="control has-icons-left has-icons-right">
                                  <input class="input input-searchx" type="search" placeholder="Buscar...">
                                  <span class="icon is-small is-left">
                                    <i class="fas fa-search"></i>
                                  </span>
                                </div>
                              </div>
                        </div>
                    </div>
                    <div class="navbar-end">
                        <div class="navbar-item">
                            Algo puede poner aca
                        </div>
                    </div>
                </div>
            </nav>
            <!-- FIN DEL NAVBAR -->

            <!------------- INI MAIN ------------------->
            <div class="mi-main">
                <div class="main-section">

                    <div class="contenedor-minititle">
                        <span class="icon is-small">
                            <i class="fas fa-brain" style="font-size: 12px;"></i>
                        </span>
                        <span class="title is-7 has-text-black">ULTIMAS CREACIONES</span>
                    </div>

                    <div class="columns is-multiline">

                        <div class="column is-4 cartas">
                            <div class="card">
                                <div class="card-image">
                                  <figure class="image is-4by3">
                                    <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
                                  </figure>
                                </div>
                                <div class="card-content">

                                  <div class="content">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                                    <a href="#">#css</a> <a href="#">#responsive</a>
                                  </div>
                                </div>
                              </div>
                        </div>

                        <div class="column is-4 cartas">
                            <div class="card">
                                <div class="card-image">
                                  <figure class="image is-4by3">
                                    <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
                                  </figure>
                                </div>
                                <div class="card-content">

                                  <div class="content">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                                    <a href="#">#css</a> <a href="#">#responsive</a>
                                  </div>
                                </div>
                              </div>
                        </div>

                        <div class="column is-4 cartas">
                            <div class="card">
                                <div class="card-image">
                                  <figure class="image is-4by3">
                                    <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
                                  </figure>
                                </div>
                                <div class="card-content">

                                  <div class="content">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                                    <a href="#">#css</a> <a href="#">#responsive</a>
                                  </div>
                                </div>
                              </div>
                        </div>

                        <div class="column is-4 cartas">
                            <div class="card">
                                <div class="card-image">
                                  <figure class="image is-4by3">
                                    <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
                                  </figure>
                                </div>
                                <div class="card-content">

                                  <div class="content">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                                    <a href="#">#css</a> <a href="#">#responsive</a>
                                  </div>
                                </div>
                              </div>
                        </div>

                        <div class="column is-4 cartas">
                            <div class="card">
                                <div class="card-image">
                                  <figure class="image is-4by3">
                                    <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
                                  </figure>
                                </div>
                                <div class="card-content">

                                  <div class="content">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                                    <a href="#">#css</a> <a href="#">#responsive</a>
                                  </div>
                                </div>
                              </div>
                        </div>

                        <div class="column is-4 cartas">
                            <div class="card">
                                <div class="card-image">
                                  <figure class="image is-4by3">
                                    <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
                                  </figure>
                                </div>
                                <div class="card-content">

                                  <div class="content">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                                    <a href="#">#css</a> <a href="#">#responsive</a>
                                  </div>
                                </div>
                              </div>
                        </div>

                        <div class="column is-4 cartas">
                            <div class="card">
                                <div class="card-image">
                                  <figure class="image is-4by3">
                                    <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
                                  </figure>
                                </div>
                                <div class="card-content">

                                  <div class="content">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                                    <a href="#">#css</a> <a href="#">#responsive</a>
                                  </div>
                                </div>
                              </div>
                        </div>

                        <div class="column is-4 cartas">
                            <div class="card">
                                <div class="card-image">
                                  <figure class="image is-4by3">
                                    <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
                                  </figure>
                                </div>
                                <div class="card-content">

                                  <div class="content">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                                    <a href="#">#css</a> <a href="#">#responsive</a>
                                  </div>
                                </div>
                              </div>
                        </div>

                    </div>

                </div>
            </div>
            <!------------- FIN MAIN ------------------->

        </div>
        <!-- FIN DE LA COLMNA DEL HEADER Y DEL MAIN -->
    </div>
</main>

<!-- Mi JavaScript -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/SGVcg.js"></script>

Como se puede apreciar en la imagen, al finalizar el scroll las card que quiero mostrar se cortan y no terminan de ser mostradas por completo, haciendo perder información al no visualizarse esta.

Desde ya muchas gracias.

2
  • Agrega tu html por favor
    – user128299
    el 19 feb. 2020 a las 2:31
  • ya fue agregado
    – Jellestad
    el 19 feb. 2020 a las 2:46

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.