Блог

Главная - Вопросы по программированию - Избегайте Y-полосы прокрутки на высоте: 100 вч; отв. h-экран;

Избегайте Y-полосы прокрутки на высоте: 100 вч; отв. h-экран;

#css #scrollbar #tailwind-css

Вопрос:

Я хочу выровнять элемент по горизонтали и вертикали, и у меня проблема с полосой прокрутки y.

Речь идет о странице успеха. Простая структура: панель навигации, главная страница, нижний колонтитул. И я использую попутный ветер. В основном я бы поместил значок в центре со словами «Спасибо»! вертикально и горизонтально. Что я также могу сделать с помощью 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?

Ответ №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>

Комментарии:

1. Спасибо вам за ваш ответ. К сожалению, это не ответ на мой вопрос. Я также не вижу никаких изменений

2. Тогда я не уверен, что понимаю ваш вопрос. Вы хотите, чтобы ваш значок был по центру? Что касается моего решения, оно может не сработать, потому что у попутного ветра есть заданные правила. При необходимости вы можете перезаписать их !important . Рабочий пример: codepen.io/sigurdmazanti/pen/XWajJaa

3. значок уже находится по центру. Взгляните: https://play.tailwindcss.com/gWnstjwGur моя проблема заключается только в 100 Вч соответственно. h-экран в talwindcss. навигационная панель 100 вч; нижний колонтитул = y-переполнение высоты навигационной панели и высоты нижнего колонтитула. как уменьшить основную секцию на 100 вч, чтобы полоса прокрутки не отображалась

Метки: