Тег нижнего колонтитула скрывается в Bootstrap - PullRequest
Новая
       0

Тег нижнего колонтитула скрывается в Bootstrap

0 голосов
/ 06 мая 2020

У меня есть нижний колонтитул, созданный с использованием следующего кода. Но по какой-то причине нижний колонтитул прилипает к низу. Итак, всякий раз, когда я уменьшаю размер своего браузера или просматриваю на мобильном устройстве, вместо того, чтобы контент сдвигал нижний колонтитул вниз, контент просто перемещался поверх нижнего колонтитула. Что-то я делаю не так, или мне нужно что-то изменить, потому что я использую Bootstrap? 

.footer-dark {
  padding: 50px 0;
  color: #f0f9ff;
  background-color: #1b1b22;
  margin-top: 200px;
}

.footer-dark h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: bold;
  font-size: 16px;
}

.footer-dark ul {
  padding: 0;
  list-style: none;
  line-height: 1.6;
  font-size: 14px;
  margin-bottom: 0;
}

.footer-dark ul a {
  color: inherit;
  text-decoration: none;
  opacity: 0.6;
}

.footer-dark ul a:hover {
  opacity: 0.8;
}

@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align: center;
    padding-bottom: 20px;
  }
}

.footer-dark .item.text {
  margin-bottom: 36px;
}

@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom: 0;
  }
}

.footer-dark .item.text p {
  opacity: 0.6;
  margin-bottom: 0;
}

.footer-dark .item.social {
  text-align: center;
}

@media (max-width:991px) {
  .footer-dark .item.social {
    text-align: center;
    margin-top: 20px;
  }
}

.footer-dark .item.social > a {
  font-size: 20px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
  margin: 0 8px;
  color: #fff;
  opacity: 0.75;
}

.footer-dark .item.social > a:hover {
  opacity: 0.9;
}

.footer-dark .copyright {
  text-align: center;
  padding-top: 24px;
  opacity: 0.3;
  font-size: 13px;
  margin-bottom: 0;
}

@media (min-width: 1200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: #fff;
  text-decoration: none;
  background-color: #504fe1;
}

.navigation-clean {
  background: #fff;
  padding-top: .75rem;
  padding-bottom: .75rem;
  color: #333;
  border-radius: 0;
  box-shadow: none;
  border: none;
  margin-bottom: 0;
}

@media (min-width:768px) {
  .navigation-clean {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

.navigation-clean .navbar-brand {
  font-weight: bold;
  color: inherit;
}

.navigation-clean .navbar-brand:hover {
  color: #222;
}

.navigation-clean.navbar-dark .navbar-brand:hover {
  color: #f0f0f0;
}

.navigation-clean .navbar-brand img {
  height: 100%;
  display: inline-block;
  margin-right: 10px;
  width: auto;
}

.navigation-clean .navbar-toggler {
  border-color: #ddd;
}

.navigation-clean .navbar-toggler:hover, .navigation-clean .navbar-toggler:focus {
  background: none;
}

.navigation-clean.navbar-dark .navbar-toggler {
  border-color: #555;
}

.navigation-clean .navbar-toggler {
  color: #888;
}

.navigation-clean.navbar-dark .navbar-toggler {
  color: #eee;
}

.navigation-clean .navbar-collapse, .navigation-clean .form-inline {
  border-top-color: #ddd;
}

.navigation-clean.navbar-dark .navbar-collapse, .navigation-clean.navbar-dark .form-inline {
  border-top-color: #333;
}

.navigation-clean .navbar-nav > .active > a, .navigation-clean .navbar-nav > .show > a {
  background: none;
  box-shadow: none;
}

.navigation-clean.navbar-light .navbar-nav .nav-link.active, .navigation-clean.navbar-light .navbar-nav .nav-link.active:focus, .navigation-clean.navbar-light .navbar-nav .nav-link.active:hover {
  color: #8f8f8f;
  box-shadow: none;
  background: none;
  pointer-events: none;
}

.navigation-clean.navbar .navbar-nav .nav-link {
  padding-left: 18px;
  padding-right: 18px;
}

.navigation-clean.navbar-light .navbar-nav .nav-link {
  color: #465765;
}

.navigation-clean.navbar-light .navbar-nav .nav-link:focus, .navigation-clean.navbar-light .navbar-nav .nav-link:hover {
  color: #37434d !important;
  background-color: transparent;
}

.navigation-clean .navbar-nav > li > .dropdown-menu {
  margin-top: -5px;
  box-shadow: none;
  background-color: #fff;
  border-radius: 2px;
}

@media (min-width:768px) {
  .navigation-clean .navbar-nav .show .dropdown-menu {
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
  }
}

@media (max-width:767px) {
  .navigation-clean .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #37434d;
    padding-top: .8rem;
    padding-bottom: .8rem;
    line-height: 1;
  }
}

.navigation-clean .dropdown-menu .dropdown-item:focus, .navigation-clean .dropdown-menu .dropdown-item {
  line-height: 2;
  color: #37434d;
}

.navigation-clean .dropdown-menu .dropdown-item:focus, .navigation-clean .dropdown-menu .dropdown-item:hover {
  background: #eee;
  color: inherit;
}

.navigation-clean.navbar-dark {
  background-color: #1f2021;
  color: #fff;
}

.navigation-clean.navbar-dark .navbar-nav a.active, .navigation-clean.navbar-dark .navbar-nav a.active:focus, .navigation-clean.navbar-dark .navbar-nav a.active:hover {
  color: #8f8f8f;
  box-shadow: none;
  background: none;
  pointer-events: none;
}

.navigation-clean.navbar-dark .navbar-nav .nav-link {
  color: #dfe8ee;
}

.navigation-clean.navbar-dark .navbar-nav .nav-link:focus, .navigation-clean.navbar-dark .navbar-nav .nav-link:hover {
  color: #fff;
  background-color: transparent;
}

.navigation-clean.navbar-dark .navbar-nav > li > .dropdown-menu {
  background-color: #1f2021;
}

.navigation-clean.navbar-dark .dropdown-menu .dropdown-item:focus, .navigation-clean.navbar-dark .dropdown-menu .dropdown-item {
  color: #f2f5f8;
}

.navigation-clean.navbar-dark .dropdown-menu .dropdown-item:focus, .navigation-clean.navbar-dark .dropdown-menu .dropdown-item:hover {
  background: #363739;
}

@media (max-width:767px) {
  .navigation-clean.navbar-dark .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #fff;
  }
}

#hero-logo {
  color: white;
  padding-left: 40px;
}

.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
  border-bottom: 1px solid #504fe1;
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(255,255,255,0.49);
  padding: 17px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

body {
  margin: 0;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  text-align: left;
  background-color: #1b1b22;
}

.color-pallete {
  color: #c7c6c9;
  color: #1a1b21;
  color: #504fe1;
  color: #707174;
  color: #3c9dd1;
  color: #45464a;
  color: #383d6a;
  color: #335f7a;
  color: #2a3d48;
  color: #262a49;
  background-color: #1b1b22;
}

.navbar.navbar-light.navbar-expand-md {
  padding: 55px;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
    margin: 0 auto;
  }
}

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: #504fe1;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.navbar-expand-xl .navbar-nav .dropdown-menu {
  margin-top: 10px;
}

.modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: none;
  border-bottom-right-radius: calc(0.3rem - 1px);
  border-bottom-left-radius: calc(0.3rem - 1px);
}

#hero-search {
  border: 1px solid white;
  border-radius: 40px;
}

#hero-search .form-control {
  background-color: transparent;
  border-color: transparent;
  color: white;
}

.form-control:focus {
  color: #444;
  background-color: #fff;
  border-color: #739ac2;
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(55,90,127,0);
  box-shadow: 0 0 0 0.2rem rgba(55,90,127,0);
}

.text-muted.card-subtitle.mb-2 {
}

h5, .h5 {
  color: #504fe1;
}

a {
  color: #504fe1;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #504fe1;
  text-decoration: underline;
}

#results .row {
  font-family: 'Montserrat';
}

.modal-open {
  overflow: inherit;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
  color: #fff;
  text-align: left;
  list-style: none;
  background-color: #222;
  background-clip: padding-box;
  border: 1px solid #504fe1;
  border-radius: 0.25rem;
}

.modal {
  font-family: 'Montserrat';
}

.pwnLogo.large {
  width: 115px;
  max-height: 100px;
}

.pwnlogo {
  width: 10px;
}

.spinner-border.preloader {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid #504fe1;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border .75s linear infinite;
  animation: spinner-border .75s linear infinite;
  position: fixed;
  z-index: 99;
  display: flex;
  top: 0;
  left: 0;
  margin: auto auto;
}
image

1 Ответ

0 голосов
/ 07 мая 2020

Как @Gabriel указал в комментарии, именно элемент #hero, имеющий height:100vh, вызывает проблему. При небольшой ширине содержимое этого элемента занимает больше места, чем 100% высоты экрана, поэтому оно выходит за пределы размера элемента и, следовательно, перекрывается нижним колонтитулом.

Итак, есть два способа исправить это:

  1. Добавьте стили, которые действуют только при небольшой ширине, которые уменьшают размер части / всего текста в #hero, чтобы он больше не переполнялся. Например, это сделает h1 меньше, когда область просмотра будет шириной 480 пикселей или уже: 

    @media (max-width: 480px) {
  #hero h1 {
    font-size: 1.5rem;
  }
}

  2. Вместо установки #hero для height:100vh используйте min-height:100vh ( вот CodePen, показывающий, что ) Это означает, что он может выходить за нижнюю часть экрана, если его содержимое занимает слишком много места (например, при небольшой ширине), но оно больше не будет перекрывать нижний колонтитул.

Что выбрать, зависит от того, насколько важно, чтобы все #hero отображалось на экране с малой шириной, можете ли вы уместить весь текст, оставив его достаточно большим для чтения , и сколько CSS работы вы хотите сделать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...