如何将组件扩展到页面底部并使其最终可滚动？

问题描述 投票：1回答：3

我想扩展组件的高度，直到达到页面底部。最终，滚动条应该出现在其中，具体取决于内容，但页面不必滚动，只有组件本身应该是可滚动的。

我到目前为止找到的解决方案如下：

<div style="height: 83vh; overflow-y: auto;">
    <div class="container-fluid pt-3">
       <div class="card-columns">
          <div class="card" style="max-width:250px;" *ngFor="let myImg of imgList">
              <img class="card-img-top" style="width:100%;" [src]="myImg">
          </div>
       </div>
    </div>
</div>

哪个不是完美的解决方案，因为height: 83vh;可能依赖于浏览器并且仅在我的情况下才能正常工作。然后，我尝试执行以下操作：

<div style="height: 100%; overflow-y: auto;">

但div会溢出网页，激活页面滚动而不是组件滚动。

有什么建议可以达到我想要的行为吗？

html css
3个回答
1
投票

也许你可以在CSS中使用calc()函数;你可以考虑完整的viewport height并减去px中的数量等于屏幕中的其他组件，这样你想要填充屏幕的组件只使用剩余的空间。

如果您测试代码段;组件使用足够的空间取决于内部的内容，但如果内容增长到足以将组件推到底部，而不是导致整个页面滚动，它将保持原位并仅滚动内容。

/* These styles are just for consistency */

body {
  margin: 0;
}

body * {
  box-sizing: border-box;
}


/*****************************************/

.top-bar {
  height: 60px;
  background-color: black;
}

section .component {
  max-height: calc(100vh - 60px);
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid red;
  overflow-y: auto;
}
<div class="top-bar">
</div>
<section>
  <div class="component">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

  </div>
</section>
1
投票

您在其中一条评论中提到您正在使用Angular - 您应该更新问题以包含它并将其添加为标记。

您可以使用window.innerHeight来获取当前视图的像素高度。

如果您在Angular应用程序中有一个单一服务，您正在维护状态，则可以使用行为主题来存储该值，以便您可以在组件中观察它：

ie: state.service.ts 

import { Observable, Subject, BehaviorSubject } from 'rxjs';

  // Observable number sources
  private currentWindowHeightStore = new BehaviorSubject<number>(0);

  // Observable number streams
  public currentWindowHeight$ = this.currentWindowHeightStore.asObservable();

  // Service message commands
  public setCurrentWindowHeight(WindowHeight: number) {
    this.currentWindowHeightStore.next(WindowHeight);
  }

然后在您的组件中，定义变量以存储windowSize，如果您正在使用可分页内容（项目列表），则存储pageSize的变量：

  private windowSize: number;
  private pageSize: number;

在组件中的ngOnInit中，订阅state.service Observable，并根据总窗口大小设置windowSize和pageSize，减去导航所需的任何空间等。（我在这里使用了示例值，您需要设置根据你自己的布局）

this.stateSvc.currentWindowHeight$
.subscribe(
  (windowSize => {
    this.windowSize = windowSize;
    this.pageSize = Math.round((this.windowSize - 200) / 30) - 2;
    this.cvPaging.pageSize = this.pageSize;
    this.flex.refresh(true);
    // 200 is the total size of the navigation header if you have one
    // 30 is the size of a single row in the grid
    // Total window size - minus total navigation / divided by the row height gives us the number of rows
    // that will fit on the current screen size and we set the paging parameter to that value - 2 rows
  }))

现在你有一个windowSize变量，它会在浏览器窗口改变大小时更新，以及一个pageSize变量，你可以使用它来查询长列表，知道窗口中有多少项目符合当前大小。

您可以使用windowSize变量使用ngStyle设置容器div的高度：

<div [ngStyle]="{'height': 'auto','max-height':windowSize}>
    Your content here.
</div>
0
投票

您正在寻找的风格属性是max-height。你可以在你的div上设置它，它将使它不再增长。

如果您目前没有足够的内容将其填充到最大值，则查看此max-height的一个技巧是将height设置为等于max-height（暂时）并暂时在div上给自己一个border。这将允许您可视化div可以获得的大小。

编辑：不同的方法......（小提琴例子）：

html, body {
    height: 100%;
    overflow: hidden;
}

然后，使你的主div的高度百分比，100％将使它绝对到底部，你可能不喜欢这样的外观所以尝试95％，添加overflow: auto;得到一个滚动条，只要高度大于容器它在...

See Fiddle Example

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.