Kevin Powell - Community•17mo ago

How to create this layout

I want to recreate the layout shown in the picture, the height is 100vh and I want an element to be centered in it, and then, below it a scrollable element (only that element must be scrollable, not the entire page) I tried this but didnt work:

<main className="min-h-screen h-0">
<div className="h-full grid place-items-center overflow-hidden">
      <div className="max-w-lg w-full flex flex-col items-center gap-8">
        <div className="relative flex flex-col items-center gap-8 w-full">
          <Clock />
          <input type="text" className="input w-full text-xl" autoFocus />
          <div className="absolute -bottom-10 left-1/2 -translate-x-1/2 translate-y-full w-full max-w-md overflow-y-auto">
            {/* all the text */}
          </div>
        </div>
      </div>
    </div>
</main>

<main className="min-h-screen h-0">
<div className="h-full grid place-items-center overflow-hidden">
      <div className="max-w-lg w-full flex flex-col items-center gap-8">
        <div className="relative flex flex-col items-center gap-8 w-full">
          <Clock />
          <input type="text" className="input w-full text-xl" autoFocus />
          <div className="absolute -bottom-10 left-1/2 -translate-x-1/2 translate-y-full w-full max-w-md overflow-y-auto">
            {/* all the text */}
          </div>
        </div>
      </div>
    </div>
</main>

2 Replies

vince•17mo ago

https://codepen.io/vince1444/pen/QWJVvoL Definitely not the best solution in the world

vince1444

CodePen

https://discord.com/channels/436251713830125568/1133060109505921194

...

Senra•17mo ago

I think you can use dvh instead of vh. It has pretty good suppord now except on firefox. Where you can use vh as fallback. https://caniuse.com/mdn-api_css_dvh_static

Gaming

Programming

How to create this layout