咨询：如何让导航面板子Div样式适配父Div高度（附代码）

我正在设计一个导航面板，需要调整各选项的样式以适配父div，例如让选项的背景色铺满父div的完整高度，同时实现子div高度与父div匹配。以下是我的代码：

HTML 代码 #

<div class="text-center text-muted"> 
  <div class="container"> 
    <div class="card"> 
      <div class="card-header" style="background-color: #e9ecef;"> 
        <div class="row mt8" id="nav_panel"> 
          <div class="col-md-2" id="nav_panel_monday" style="background-color: rgb(0, 160, 157);"> 
            <a id="nav_href_monday" href="#" style="color: white;">Monday</a> 
          </div> 
          <div class="col-md-2" id="nav_panel_tuesday"> 
            <a id="nav_href_tuesday" href="#">Tuesday</a> 
          </div> 
          <div class="col-md-2" id="nav_panel_wednesday"> 
            <a id="nav_href_wednesday" href="#">Wednesday</a> 
          </div> 
          <div class="col-md-2" id="nav_panel_thursday"> 
            <a id="nav_href_thursday" href="#">Thursday</a> 
          </div> 
          <div class="col-md-2" id="nav_panel_friday"> 
            <a id="nav_href_friday" href="#">Friday</a> 
          </div> 
        </div> 
      </div> 
      <div class="card-body"> 
        <div id="div_hidden_monday"></div> 
        <div id="div_hidden_tuesday" style="display: none;"></div> 
        <div id="div_hidden_wednesday" style="display: none;"></div> 
        <div id="div_hidden_thursday" style="display: none;"></div> 
        <div id="div_hidden_friday" style="display: none;"></div> 
      </div> 
    </div> 
  </div> 
</div>

CSS 代码 #

.container { 
  width: 100%; 
  padding-right: 0; 
  padding-left: 0; 
  margin-right: auto; 
  margin-left: auto; 
}
.card { 
  position: relative; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  flex-direction: column; 
  min-width: 0; 
  word-wrap: break-word; 
  background-color: #FFFFFF; 
  background-clip: border-box; 
  border: 1px solid rgba(0, 0, 0, 0.125); 
  border-radius: 0.25rem; 
}
.card-header { 
  padding: 0.75rem 1.25rem; 
  margin-bottom: 0; 
  border-bottom: 1px solid rgba(0, 0, 0, 0.125); 
}
#nav_panel { 
  background-color: #e9ecef; 
  padding-right: 0; 
  padding-left: 0; 
  border-radius: 5px; 
}
.col-md-2 { 
  position: relative; 
  width: 100%; 
  min-height: 1px; 
  padding-right: 15px; 
  padding-left: 15px; 
}

请问有什么可行的解决方案？感谢您的阅读！

解决方案 #

核心问题是默认的内边距和布局规则导致导航选项无法填满父容器高度，我们可以通过以下几步调整来实现需求：

1. 移除.card-header的默认内边距，让导航面板完全贴合 #

.card-header自带的上下padding会让导航选项的背景无法铺满整个头部高度，我们把这个padding转移到导航面板本身：

.card-header {
  padding: 0; /* 清除默认上下内边距 */
  margin-bottom: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

2. 用Flex布局强制所有导航选项高度一致 #

Bootstrap的row默认是flex容器，但我们需要显式设置让子元素拉伸对齐，同时移除列元素的默认左右padding，避免选项间出现缝隙：

#nav_panel {
  background-color: #e9ecef;
  padding: 0.75rem 0; /* 保留上下内边距，保证头部高度 */
  border-radius: 5px;
  display: flex;
  align-items: stretch; /* 让所有col子元素高度自动匹配 */
}

.col-md-2 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 0;
  padding-left: 0;
  display: flex;
  align-items: center; /* 让链接文字垂直居中 */
  justify-content: center; /* 文字水平居中 */
}

3. 让链接元素铺满整个选项区域 #

为了让点击区域和背景色完全匹配，需要把a标签设置为块级元素，填充整个col的宽度和高度：

#nav_panel a {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem; /* 给链接添加内边距，提升点击体验 */
  text-decoration: none; /* 可选：移除默认下划线 */
}

4. 优化选中项样式（可选） #

现在因为高度已经完全匹配，直接给选中的选项设置背景色就会自动铺满整个导航栏高度：

#nav_panel_monday {
  background-color: rgb(0, 160, 157);
}
#nav_panel_monday a {
  color: white;
}

修改后的完整CSS示例 #

.container { 
  width: 100%; 
  padding-right: 0; 
  padding-left: 0; 
  margin-right: auto; 
  margin-left: auto; 
}
.card { 
  position: relative; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  flex-direction: column; 
  min-width: 0; 
  word-wrap: break-word; 
  background-color: #FFFFFF; 
  background-clip: border-box; 
  border: 1px solid rgba(0, 0, 0, 0.125); 
  border-radius: 0.25rem; 
}
.card-header { 
  padding: 0; 
  margin-bottom: 0; 
  border-bottom: 1px solid rgba(0, 0, 0, 0.125); 
}
#nav_panel { 
  background-color: #e9ecef; 
  padding: 0.75rem 0; 
  border-radius: 5px; 
  display: flex; 
  align-items: stretch; 
}
.col-md-2 { 
  position: relative; 
  width: 100%; 
  min-height: 1px; 
  padding-right: 0; 
  padding-left: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
#nav_panel a {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: inherit;
}
#nav_panel_monday {
  background-color: rgb(0, 160, 157);
}
#nav_panel_monday a {
  color: white;
}

这样调整后，每个导航选项的背景色会完全铺满.card-header的高度，子元素高度和父容器完美匹配，同时点击区域也更加友好。

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