如何消除HTML首页的水平垂直多余空白及滚动条？

根据你的描述和代码，我梳理了几个可能导致布局异常的关键点，以及对应的修复方案：

一、Bootstrap栅格与自定义宽度冲突 #

你给.right-col设置了width:30%，但同时又用了Bootstrap的col-lg-4类（默认宽度是33.333%），这两个宽度规则会冲突，导致布局计算混乱，最终引发溢出或空白。

修复方案： #

如果需要精确的70%/30%比例，建议替换Bootstrap栅格为自定义flex布局：

.home-box {
  display: flex;
  flex-wrap: wrap; // 小屏幕自动换行
  min-height: 100vh; // 确保页面至少占满视口高度
  width: 100%;
  
  .left-col {
    flex: 0 0 70%;
    max-width: 70%;
    padding: 0;
    position: relative; // 为绝对定位的轮播项提供参考
    height: 100vh; // 轮播区域占满视口高度，可根据需求调整
  }

  .right-col {
    flex: 0 0 30%;
    max-width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // 小屏幕下（小于lg断点）让两列各占100%
  @media (max-width: 991px) {
    .left-col, .right-col {
      flex: 0 0 100%;
      max-width: 100%;
      height: auto; // 小屏幕取消固定高度
    }
  }
}

同时修改HTML，移除Bootstrap的col-*类：

<div class="home-box">
  <div class="left-col">
    <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">
    <filter-box></filter-box>
  </div>
</div>

二、轮播组件的绝对定位问题 #

你的.carousel-item设置了position:absolute，但父容器（.left-col）没有设置position:relative，导致轮播项相对于整个文档定位，容易超出视口。同时，绝对定位元素会脱离文档流，导致父容器高度塌陷，引发布局空白。

修复方案： #

完善轮播相关样式：

.left-col {
  // ... 已有的flex布局样式
  .img-box {
    display: flex;
    height: 100%; // 填满父容器高度
    justify-content: center; // 图片水平居中
    align-items: center; // 图片垂直居中
  }

  img {
    object-fit: contain;
    max-width: 100%; // 图片最大宽度不超过容器
    max-height: 100%; // 图片最大高度不超过容器
    // 移除background相关属性，因为img标签不需要这些，object-fit已经足够
  }

  .carousel-item {
    display: block !important;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; // 让轮播项完全填满.left-col
    transition: all 0.2s ease;
    visibility: hidden;
    opacity: 0; // 添加透明度过渡，配合active类实现平滑切换
  }

  .carousel-item.active {
    visibility: visible;
    opacity: 1;
  }
}

三、全局高度设置的补充 #

你的全局样式中body, html设置了height:100%，但.home-box没有设置对应的最小高度，可能导致页面内容不足时出现空白。我们已经在flex布局中添加了min-height:100vh，确保页面至少占满视口高度。

四、Bootstrap默认间距的调整 #

如果保留使用Bootstrap的.row，默认会有负margin，可能导致横向溢出。可以给.row添加no-gutters类来消除这个间距：

<div class="container-fluid home-box">
  <div class="row no-gutters">
    <!-- 列内容 -->
  </div>
</div>

按以上步骤调整后，应该能解决滚动条和多余空白的问题，同时保持布局的响应式特性。

内容的提问来源于stack exchange，提问作者Onera