如何在Angular和Bootstrap 5中实现100%页面高度？

• 搞定根层级元素的高度继承
  Angular的根组件app-root默认是行内元素，没法继承父元素高度，所以得在全局样式（styles.css）里添加这段代码：

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  app-root {
    display: block;
    height: 100%;
  }
  

  顺便清除html和body的默认边距、内边距，避免出现不必要的滚动条或高度偏差。

• 用Flex布局让内容区域占满剩余高度
  在你的app组件样式里，给主容器设置垂直方向的Flex布局，然后让main区域自动填充页眉页脚之外的空间：

  .app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  header {
    /* 这里放你页眉的固定样式，比如固定高度 */
  }
  
  main {
    flex: 1; /* 这是核心，让main占满剩余的全部高度 */
    overflow-y: auto; /* 如果内容太多，加这个可以让main区域单独滚动 */
  }
  
  footer {
    /* 这里放你页脚的固定样式 */
  }
  

  对应的组件HTML要把所有内容包在这个.app-container里：

  <div class="app-container">
    <header>你的页眉内容</header>
    <main>你的主要内容</main>
    <footer>你的页脚内容</footer>
  </div>
  

• 排查冲突样式
  检查下有没有第三方样式或者自定义样式覆盖了html、body或者app-root的height属性，比如有些UI库会把body设成min-height: 100vh，这时候要调整样式优先级，确保我们设置的height:100%生效。另外别给main区域设固定高度，全靠flex:1来分配空间。

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