1

necesito crear el siguiente layout:

Img Laout

De hecho esto ya es un layout maquetado con tailwind, pero realmente no se como puedo hacer para que solo se le pueda hacer scroll al main y aparezca mi footer por debajo.

Lo que había intentado fue crear los divs con propiedad sticky, funcionaba todo bien 😋 Pero... Cuando cubria todo mi div contenedor de layout con la propiedad overflow-hidden el contenido ya no era sticky. La principal razon por la que utilize overflow-hidden es porque el contenido de mi main sobrepasaba al 100% de mi width.

Tengo la siguiente estructura html:

<div class="flex overflow-hidden">
    <aside class="h-screen w-60 bg-red-400 flex items-center justify-center fixed top-0 left-0 z-10">
        ASIDE
    </aside>
    <div class="flex flex-col w-full overflow-hidden relative">
        <nav class="h-20 bg-yellow-400 w-full flex justify-between fixed top-0 pl-60">
            <div>User</div>
            <div>Logout</div>
        </nav>
        <div class="flex">
            <main class="flex-auto min-h-screen p-4 overflow-hidden pt-20 pl-60 pr-60">
                <div class="h-screen bg-pink-400 ">
                    Buenas
                </div>
            </main>
            <aside class="flex h-96 w-60 items-center justify-center fixed right-0 z-20 mt-20">
                <div class="h-full bg-blue-400 w-full">
                    ASIDE
                </div>
            </aside>
        </div>
    </div>
</div>

¿Como puedo lograr esto satisfactoriamente?

2
  • si en vez de usar overflow hidden usas overflow x hidden tendras scroll vertical pero no horizontal, no se si ese es tu problema el 9 jul. 2021 a las 18:04
  • No, ese no es mi problema el 9 jul. 2021 a las 18:21

1 respuesta 1

0

Más que elementos sticky, buscas elementos fixed. Tomé tu layout, añadí un footer fixed, y me quedó del siguiente modo, que supongo, es el que buscas:

Layout con footer fijo.

Te recomendaría evitar usar en demacía el overflow-hidden en muchos elementos anidados, porque puede causar problemas a los elementos que pretender ser sticky, aunque en este caso se está trabajando con elementos fixed. Te dejo el layout, con la pequeña adición que le hice:

<div class="flex overflow-hidden">
    <aside class="h-screen w-60 bg-red-400 flex items-center justify-center fixed top-0 left-0 z-10">
        ASIDE
    </aside>
    <div class="flex flex-col w-full overflow-hidden relative">
        <nav class="h-20 bg-yellow-400 w-full flex justify-between fixed top-0 pl-60">
            <div>User</div>
            <div>Logout</div>
        </nav>
        <div class="flex">
            <main class="flex-auto min-h-screen p-4 overflow-hidden pt-20 pl-60 pr-60">
                <div class="h-screen bg-pink-400 ">
                    Buenas
                </div>
            </main>
            <aside class="flex h-96 w-60 items-center justify-center fixed right-0 z-20 mt-20">
                <div class="h-full bg-blue-400 w-full">
                    ASIDE
                </div>
            </aside>
        </div>
    <footer> <!-- Acá el footer que añadí -->
        <div class="flex fixed bottom-0 inset-x-0 justify-center border-t-2 z-10 text-xl">Footer</div>
    </footer>
    </div>
</div>

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.