CODEWITHSUNDEEP
csstailwind-css
ArcticMediaRyan
ArcticMediaRyan

Reputation: 885

left div only scroll

I am working on a TOS page. On the right, is an image that should be a tailwind height of h-full

The left however, contains a Terms of Service that needs to be scrollable. Right now, and anyway I try, the whole page scrolls. The image on the right should be static and the left should scroll. What am I not understanding.

<template>
    <Head title="Terms Of Service" />
    <div class="min-h-full flex bg-gray-900">
        <div class="w-1/2 flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
            <div class="mx-auto w-full lg:w-full">
                <div>
                    <div class="tracking-wider uppercase flex justify-center text-4xl md:mt-0 md:order-1 font-logo">
                        <div class="text-white">REALKINK</div><div class="text-red-600">MEN</div>
                    </div>
                    <div class="mt-6 relative">
                        <div class="absolute inset-0 flex items-center" aria-hidden="true">
                            <div class="w-full border-t border-gray-700" />
                        </div>
                        <div class="relative flex justify-center text-sm" />
                        </div>
                    <h2 class="flex justify-center mt-6 text-xl font-extrabold text-gray-300">Terms Of Service</h2>
                </div>

                <div class="mt-8">
                    <div v-html="terms" class="w-full sm:max-w-2xl mt-6 p-6 bg-gray-800 text-gray-100 shadow-md sm:rounded-lg prose" />
                </div>
            </div>
        </div>
        <div class="hidden lg:block relative flex-1">
            <img class="absolute inset-0 h-full w-full object-cover" src="https://64.media.tumblr.com/7395cca2c3ec57278b71a63e3221d36a/482bae774b0fde2f-91/s2048x3072/a10ae44d666d4f8a0adec40b9f0030748c6f8745.jpg" alt="" />
        </div>
    </div>
</template>



<script>
import { defineComponent } from 'vue'
import { Head } from '@inertiajs/inertia-vue3';

export default defineComponent({
    props: ['terms'],

    components: {
        Head,

    },
})
</script>

Upvotes: 0

Views: 47

Answers (1)

ArcticMediaRyan
ArcticMediaRyan

Reputation: 885

Thanks to @darkforest, the solution was kinda in his suggestion in a comment.

In the right div on the image, add sticky, top-0, and remove absolute

<div class="hidden lg:block relative flex-1">
            <img class="sticky top-0 inset-0 h-screen w-full object-cover" src="https://64.media.tumblr.com/7395cca2c3ec57278b71a63e3221d36a/482bae774b0fde2f-91/s2048x3072/a10ae44d666d4f8a0adec40b9f0030748c6f8745.jpg" alt="" />
        </div>

Upvotes: 1

Related Questions