Как избавиться от лишнего пространства как по горизонтали, так и по вертикали в моей HTML-странице - PullRequest
Новая
       16

Как избавиться от лишнего пространства как по горизонтали, так и по вертикали в моей HTML-странице

0 голосов
/ 27 февраля 2019

enter image description here В настоящее время я работаю над домашней страницей, 70% которой покрыто каруселью, а 30% - компонентом фильтра.Я сталкиваюсь с пробелом или пустым ненужным пространством с кодом ниже: 

// SCSS
.home-box {
  .left-col {
     padding: 0;
     width: 100%;

      .img-box {
        display: flex;
      }
      img {
        background-position: center;
        background-size: contain;
        object-fit: contain;
        width: 80%;
        height: 100%;
    }
    .carousel-item {
        display: block !important;
        z-index: 1;
        position: absolute;
        transition: all 0.2s;
        visibility: hidden;
      }
    .carousel-item.active {
        visibility: visible;
        opacity: 1;
      }
    }
  .right-col {
    width:30%;
    display: flex;
    justify-content: center;
    align-items: center;
   }
 }

HTML: 

 <div class="container-fluid home-box">
 <div class="row">
<div class="left-col col-12 col-lg-8">
  <ngb-carousel [showNavigationArrows]="false" [showNavigationIndicators]="false">
    <ng-template ngbSlide *ngFor="let item of itemList">
      <div class="img-box">
        <img [src]="item.imgUrl">
      </div>
    </ng-template>
  </ngb-carousel>
</div>
<div class="right-col col-12 col-lg-4">
  <filter-box></filter-box>
</div>

Я получаю дополнительное пространство, и полосы прокрутки получаютдобавил как по горизонтали, так и по вертикали в правый нижний угол моей страницы.Я не хочу использовать overflow:hidden на своей странице.У меня есть мой глобальный scss, как показано ниже: 

body, html {
  height:100% ;
  margin: 0;
  padding: 0;
  font-family: "Roboto", "Helvetica Neue", sans-serif;
  font-size:14px;
}

Я также проверил ниже потоки переполнения стека, поскольку мой контент может быть меньше для страницы, но если я добавлю больше содержимого - пространство будет увеличиваться.

  1. лишние пробелы под нижним колонтитулом 2. пустое пространство под телом и странное расположение элементов div

Я также много искалчтобы определить, является ли мое позиционирование проблемой, но в конце концов я не могу найти проблему в своем коде.Ребята, не могли бы вы мне помочь?

...