如何让flex容器覆盖水平分隔线下方的整个页面？

我尝试设置.flex-container使其覆盖水平分隔线下方的整个页面，但在窗口宽度约1200px时，该flex容器无法延伸至页面底部。小屏幕下按钮自动变为列布局的表现符合预期。期望效果为：分隔线下方的蓝色背景区域铺满剩余页面高度，按钮在其中合理排列。

现有代码 #

CSS 代码 #

body {
  background-color: #06283D;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
}

.heading {
  color: #1894E7;
  display: flex;
  justify-content: center;
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 3.6em;
  margin: 5%;
}


.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: #256D85;
  justify-content: space-around;
  font-family: 'Montserrat', sans-serif;
  color: #06283D;
  position: relative;
  left: 0;
  right: 0;
  }

.flex-container>button {
  background-color: #DFF6FF;
  width: 350px;
  margin: 6%;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
  transition-duration:0.3s;

}
.flex-container>button:hover {
  transform: translateY(-5px);
  transition-duration:0.3s;
  box-shadow: 0 10px 20px 2px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 1086px){
  .flex-container>button{
    margin: 7%;
  }
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Papers</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="public/css/styles.css">
  </head>
  <body>
    <div class="heading">
      <h1>Loren ipsum</h1>
    </div>
    <hr style="margin:0;position: relative;left:-15px;width:100%;height:0.5px;border-width:0;color:gray;background-color:black;opacity:0.5">


      <div class="flex-container">
        <button>1Year</button>
        <button>2Year</button>
        <button>3Year</button>
        <button>4Year</button>
      </div>

  </body>
</html>

解决方案 #

问题核心是body未配置垂直布局规则，且.flex-container未设置剩余高度填充，按以下修改即可解决：

1. 调整全局高度与布局
   给html和body设置满高，同时让body使用垂直flex布局，确保子元素能按垂直方向分配空间：

   html, body {
     background-color: #06283D;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     height: 100%;
   }
   body {
     display: flex;
     flex-direction: column;
   }
   

2. 让flex容器填充剩余高度
   给.flex-container添加flex:1属性，使其自动占据标题和分隔线之外的所有剩余页面高度：

   .flex-container {
     display: flex;
     flex-wrap: wrap;
     background-color: #256D85;
     justify-content: space-around;
     font-family: 'Montserrat', sans-serif;
     color: #06283D;
     position: relative;
     left: 0;
     right: 0;
     flex: 1; /* 新增属性 */
     align-content: flex-start; /* 可选：保持按钮在顶部排列，避免垂直拉伸 */
   }
   

3. 修复分隔线溢出问题
   移除原分隔线的left:-15px样式，避免横向溢出：

   <hr style="margin:0;width:100%;height:0.5px;border-width:0;color:gray;background-color:black;opacity:0.5">
   

修改完成后，.flex-container会在所有屏幕宽度下铺满分隔线下方的剩余页面，同时保留小屏幕的列布局效果。

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