html - How to fix the excess space below sticky element in grid layout in react and tailwind css - Stack Overflow

admin管理员组

文章数量:1181432

I'm working on a webpage with a grid layout containing several items. There is also a sticky element (such as an image or button) positioned at the bottom of the page. The issue is that the sticky element is causing extra space below the grid when the content reaches the bottom, which I don’t want.

Expected Behavior: The grid layout should fill the available screen space, ending exactly with the last item.

The sticky element should appear at the bottom, but it should not introduce any extra space after the last item in the grid.

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 (
    <div className="relative w-full bg-gray-900">
      {/* Background Image */}
      <div className="absolute inset-0">
        <img
          src={kbg}
          alt="Background"
          className="w-full h-full object-cover opacity-100 pt-12"
        />
      </div>

      {/* Content */}
      <div className="relative z-10 container mx-auto px-4">
        <h1 className="text-4xl font-bold text-white">• Deliver</h1>

        <p className="w-3/12 text-white">
          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?
        </p>

        <div className="stick-id relative">
          {/* Grid of Images */}
          <div className="grid grid-cols-2 gap-12">
            {images.map((src, index) => (
              <div
                key={index}
                className="flex flex-col items-center relative aspect-square rounded-lg"
              >
                <img
                  src={src || "/placeholder.svg"}
                  alt={`Gallery image ${index + 1}`}
                  className="w-1/2 rounded-xl"
                />
              </div>
            ))}
          </div>

          {/* Sticky Image */}
          <div className="sticky bottom-0 left-0 right-0 z-20 flex justify-center">
            <img
              src={kgif}
              alt="Fixed Bottom Image"
              className="h-[80vh] object-cover"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

You can we the image of the output through the given link:

.png

I'm working on a webpage with a grid layout containing several items. There is also a sticky element (such as an image or button) positioned at the bottom of the page. The issue is that the sticky element is causing extra space below the grid when the content reaches the bottom, which I don’t want.

Expected Behavior: The grid layout should fill the available screen space, ending exactly with the last item.

The sticky element should appear at the bottom, but it should not introduce any extra space after the last item in the grid.

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 (
    <div className="relative w-full bg-gray-900">
      {/* Background Image */}
      <div className="absolute inset-0">
        <img
          src={kbg}
          alt="Background"
          className="w-full h-full object-cover opacity-100 pt-12"
        />
      </div>

      {/* Content */}
      <div className="relative z-10 container mx-auto px-4">
        <h1 className="text-4xl font-bold text-white">• Deliver</h1>

        <p className="w-3/12 text-white">
          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?
        </p>

        <div className="stick-id relative">
          {/* Grid of Images */}
          <div className="grid grid-cols-2 gap-12">
            {images.map((src, index) => (
              <div
                key={index}
                className="flex flex-col items-center relative aspect-square rounded-lg"
              >
                <img
                  src={src || "/placeholder.svg"}
                  alt={`Gallery image ${index + 1}`}
                  className="w-1/2 rounded-xl"
                />
              </div>
            ))}
          </div>

          {/* Sticky Image */}
          <div className="sticky bottom-0 left-0 right-0 z-20 flex justify-center">
            <img
              src={kgif}
              alt="Fixed Bottom Image"
              className="h-[80vh] object-cover"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

You can we the image of the output through the given link:

https://i.sstatic.net/Kn8ZY8VG.png

• html
• css
• reactjs
• scroll
• tailwind-css

Share Improve this question Follow asked 2 days ago kiran balikaikiran balikai 1533 bronze badges 2

• The div above your Grid of Images has the classname "stick-id". I'm not saying fixing it will solve your problem, but it's not a tailwind classname, and I expect it's not what you meant to type. – Kirstie Wilkinson Commented 2 days ago
• yeah i was trying out something that was supposed to be a class name ignore it should have removed that before posting – kiran balikai Commented 2 days ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Add min-h-screen to the outer container to ensure it fills the entire screen and pb-20 to the content wrapper so the sticky element fits without pushing extra space below the grid.

本文标签：