Blazor应用Counter.razor页面适配视口高度的Bootstrap类咨询

要让包裹Counter内容的div高度刚好等于浏览器可见区域减去顶部横幅的高度，在Bootstrap 5中可以通过flex布局类组合来实现，无需手动计算高度，具体步骤如下：

1. 首先在页面的根容器（比如MainLayout.razor）上添加d-flex flex-column min-vh-100类，确保整个页面的高度至少占满视口：

<div class="d-flex flex-column min-vh-100">
  <!-- 顶部横幅（含About按钮的导航栏） -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light flex-shrink-0">
    <!-- 横幅内容 -->
  </nav>
  <!-- 页面内容区域 -->
  <main class="flex-grow-1">
    @Body <!-- 这里会渲染Counter.razor的内容 -->
  </main>
</div>

2. 然后在Counter.razor中，将原有代码包裹在带有flex-grow-1类的div中（如果需要内部元素居中，还可以添加d-flex flex-column justify-content-center align-items-center）：

<div class="flex-grow-1 d-flex flex-column justify-content-center align-items-center">
  <h1>Counter</h1>

  <p role="status">Current count: @currentCount</p>

  <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
</div>

原理说明 #

• d-flex flex-column：将容器设置为垂直方向的flex布局
• min-vh-100：确保容器高度至少等于视口高度
• flex-shrink-0：让顶部横幅保持原有高度，不被压缩
• flex-grow-1：让内容区域自动填充顶部横幅剩余的所有视口高度，刚好达到“等于浏览器可见部分高度减去顶部横幅高度”的需求

如果你的顶部横幅是fixed-top固定定位的，那么可以直接给包裹Counter内容的div添加vh-100（占满视口高度）和pt-*类（比如pt-5，根据横幅高度调整），避免内容被固定横幅遮挡：

<div class="vh-100 pt-5 d-flex flex-column justify-content-center align-items-center">
  <!-- Counter内容 -->
</div>

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