Как исправить избыточное пространство ниже липкого элемента в сетке в React и Tailwind CSS ⇐ Html

[Anonymous]

Я работаю на веб -странице с макетом сетки, содержащей несколько элементов. Существует также липкий элемент (например, изображение или кнопка), расположенный в нижней части страницы. Проблема заключается в том, что липкий элемент вызывает дополнительное пространство под сеткой, когда контент достигает дна, чего я не хочу. Заполните доступное пространство экрана, заканчивая именно последним элементом. /p>

Код: Выделить всё

import React, { useState, useEffect } from "react";
import k1 from "../../assets/Uiux/08.jpg";
import k2 from "../../assets/Uiux/09.jpg";
import k3 from "../../assets/Uiux/10.jpg";
import k4 from "../../assets/Uiux/11.jpg";
import k5 from "../../assets/Uiux/12.jpg";
import k6 from "../../assets/Uiux/13.png";
import k7 from "../../assets/Uiux/14.png";
import k8 from "../../assets/Uiux/15.jpg";
import k9 from "../../assets/Uiux/16.png";
import k10 from "../../assets/Uiux/17.jpg";
import kgif from "../../assets/UiUx/hand.gif";
import kbg from "../../assets/Uiux/bg.png";

export default function TwoColumnImageGrid() {
const [images, setImages] = useState([]);

useEffect(() => {
setImages([k1, k2, k3, k4, k5, k6, k7, k8, k9, k10]);
}, []);

return (

{/* Background Image */}

[img]{kbg}
className="w-full h-full object-cover opacity-100 pt-12"
/>

{/* Content */}

• Deliver

Lorem ipsum dolor sit amet consectetur, adipisicing elit. In
consequatur aliquid deleniti natus fuga, illo esse. Dolorum harum quas
doloremque aut ducimus, asperiores distinctio sit ullam minima
corporis quo, doloribus dignissimos omnis?


{/* Grid of Images */}

{images.map((src, index) => (

[img]{src || [/img]
                  alt={`Gallery image ${index + 1}`}
className="w-1/2 rounded-xl"
/>

))}


{/* Sticky Image */}

[img]{kgif}
className="h-[80vh] object-cover"
/>




);
}

Вы можете нам, чтобы изображение вывода через данную ссылку:
https://i.sstatic.net/kn8zy8vg.png

Подробнее здесь: https://stackoverflow.com/questions/793 ... ct-and-tai