ngFor循环导致body溢出，求数据容器内滚动的解决方案

嘿，我看了你遇到的问题——用ngFor渲染数据时body跟着溢出，想让数据在页面50%的区域内滚动对吧？我来帮你搞定这个！

首先，咱们得先理清核心问题：你的容器没有被正确限制高度，导致内容撑高了整个body。之前用vh和overflow-y:hidden没起效，大概率是基础样式没配好，或者容器的优先级被覆盖了。

具体修复步骤： #

1. 先搞定基础的html/body样式

如果html和body没有明确的高度，vh单位的计算会出问题，而且body的滚动也没法被彻底阻止。添加这段CSS：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 直接让body不滚动，所有滚动都交给容器 */
}

2. 调整数据容器的样式

把你的容器高度改成需求的50vh，同时确保overflow-y:auto生效，还要避免其他样式冲突：

.projectsContainer {
  padding-top: 15px;
  width: 97%;
  margin-left: 10px;
  max-width: unset;
  height: 50vh; /* 占页面50%高度 */
  overflow-y: auto; /* 内容超出时内部滚动 */
  /* 可选：添加个边框，方便你调试容器范围 */
  /* border: 1px solid #eee; */
}

/* 如果保留.hauteur类，确保它的高度优先级足够 */
.hauteur {
  height: 50vh !important;
}

3. 修复HTML结构（可选但推荐）

你现在直接在div里放li元素，不符合HTML规范，浏览器的默认列表样式可能会干扰布局。把li放到ul里面：

<div class="projectsContainer container hauteur" id="hauteur">
  <ul style="list-style: none; padding: 0; margin: 0;">
    <li class="flex-row bb pt5 pb5 flex-noshrink mh20" 
        *ngFor="let p of Projects.data | paginate: {itemsPerPage: itemsPerPage,currentPage: currentPage,totalItems: totalItems};" 
        value="{{p.id}}">
      <a class="flex2 pointeur" [routerLink]="(['/Project',p.id])" (change)="currentIndex = $event.target.value">{{p.code}}</a>
      <a class="flex4">{{p.title}}</a>
      <span class="flex2">{{p.created_at}}</span>
      <span class="flex2">{{p.createdby_name}}</span>
      <span class="flex2">{{p.updated_at}}</span>
      <span class="flex2">{{p.updatedby_name}}</span>
      <span class="flex2">{{p.pricelist_label}}</span>
      <span class="flex2 pl10">{{p.country_label}}</span>
      <span class="flex2 text-align-right mb5">{{p.total_fourniture}}</span>
      <a (click)="openModal(template)" class="flex-row bb pt5 pointeur pb5 flex-noshrink mh20"><img src="{{this.trash}}" class="trash"></a>
      <a class="flex-row bb pt5 pointeur pb5 flex-noshrink mh20" (click)="openModal(template2)"><img src="{{this.clip}}" class="clip"></a>
    </li>
  </ul>
</div>

为什么之前的方法没奏效？ #

• 你可能没给html/body设置height:100%，导致vh单位没法正确对应视口高度，容器的高度限制没生效。
• 直接给body加overflow-y:hidden但没确保容器有明确的高度和滚动属性，容器还是会把body撑高。
• 不规范的列表结构可能让浏览器默认样式影响了容器的布局计算。

现在试试这些修改，数据应该会在50%高度的容器里滚动，body不会再跟着溢出啦！

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