在高度:100vh时避免y形滚动条;分别地.h-screen;

Question

我想在水平和垂直方向对齐一个元素，但是y轴滚动条有问题。

是关于成功页面的。结构简单:导航栏、主栏、页脚。我用的是TailwindCss。在主菜单中，我会在中间放置一个图标，上面写着Thank You!垂直和水平。我也可以用flex。

<div>
<h2 class="text-3xl text-center my-10 ">some text</h2>
<div class="flex h-screen justify-center items-center bg-gray-500">
<div class="text-center text-green-500 text-3xl">
<svg class="w-40 h-40" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
THANK YOU!
</div>
</div>
<div class="text-center my-10">beautiful footer</div>
</div>

下面是示例的链接:https://play.tailwindcss.com/gWnstjwGur

我的问题然而，我在这里有一个问题，现在y轴滚动条是可见的。这是我不想要的。这显然是由于h屏。如果没有y轴滚动条，我怎么实现呢?

Answer 1

如果您想制作一个没有滚动的完整页面，请在包装器上使用overflow-y: hidden;。这样你就不能垂直滚动了。

如果你仍然想要滚动，但只是没有滚动条:

::-webkit-scrollbar {
display: none;
}
.remove-scrollbar {
-ms-overflow-style: none;  /* IE + Edge */
scrollbar-width: none;  /* Firefox */
}

<div class="remove-scrollbar">
<h2 class="text-3xl text-center my-10 ">some text</h2>
<div class="flex h-screen justify-center items-center bg-gray-500">
<div class="text-center text-green-500 text-3xl">
<svg class="w-40 h-40" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
THANK YOU!
</div>
</div>
<div class="text-center my-10">beautiful footer</div>
</div>