Skip to content

Conversation

rozsazoltan
Copy link
Contributor

@rozsazoltan rozsazoltan commented May 25, 2025

The parent element has a pt-14.25, which needs to be subtracted from 100vh. The parent also has a 1px border on the top and bottom, which should also be subtracted. Additionally, I would use dvh instead of vh.

Before After
image image

Copy link

vercel bot commented May 25, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tailwindcss-com ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 26, 2025 11:52am

Copy link
Member

@philipp-spiess philipp-spiess left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think (from trying in DevTools in Chrome only) it would also work if you add a h-[100dvh] on to the outer most div in this component (<div className="max-w-screen overflow-x-hidden">) and then use a h-full instead of this h-[calc(100dvh-var(--spacing)*14.25-2px)]: Screenshot 2025-05-26 at 11 01 30

@rozsazoltan
Copy link
Contributor Author

Valid observation. I didn't remove the original calculation there, only supplemented it, but if I replace it with h-full, we indeed get a perfect solution, much simpler.

There’s no need for h-dvh on the parent since the grid container already has a min-h-dvh, which, as far as I can tell, is the standard across all pages.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants