如何让导航栏内的按钮占满外层div的全部高度？

我是CSS初学者，正在制作极简风格导航栏，希望头部按钮能占满卡其色外层容器的全部高度，但设置height: auto和margin: 0后没效果，该用哪些CSS命令实现？

我试过设置height: auto和margin: 0，但按钮还是没法填满上下空间。

我的HTML代码 #

<div className="navbar">
        <div className="dropdown">
          <button className="dropdown-head">Head item 1</button>
          <div className="dropdown-items">
            <a href="#">Sub item 1-1</a>
            <a href="#">Sub item 1-2</a>
            <a href="#">Sub item 1-3</a>
          </div>
        </div>
        <div className="dropdown">
          <button className="dropdown-head">Head item 2</button>
          <div className="dropdown-items">
            <a href="#">Sub item 2-1</a>
            <a href="#">Sub item 2-2</a>
            <a href="#">Sub item 2-3</a>
          </div>
        </div>
      </div>

我的CSS代码 #

.navbar {
  background-color: khaki;
}

/* .dropdown {
  background-color: white;
} */

.dropdown-head {
  background-color: gray;
  color: white;
  font-size: 16px;
  min-width: 160px;
  border: none;
}

.dropdown-items {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /* z-index: 1; */
}

.dropdown-items a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-items {
  display: block;
}

.dropdown:hover .dropdown-head {
  background-color: rgb(238, 3, 199);
}

.dropdown-items a:hover {
  background-color: rgb(155, 155, 155);
  color: white;
}

当前效果示意图 #

问题核心是浏览器默认样式干扰，以及父容器缺少布局规则，按以下步骤修改即可：

1. 全局重置默认样式 #

先清除浏览器自带的margin、padding，统一盒模型：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 给导航栏设置flex布局 #

用flex让子元素自动拉伸至容器高度：

.navbar {
  background-color: khaki;
  display: flex;
  align-items: stretch; /* 强制子元素填满容器高度 */
  /* 可选：给导航栏设置固定高度，比如 height: 50px; */
}

3. 让下拉容器和按钮撑满空间 #

.dropdown {
  display: flex;
  /* 可选：让每个下拉项平分导航栏宽度 */
  /* flex: 1; */
}

.dropdown-head {
  background-color: gray;
  color: white;
  font-size: 16px;
  min-width: 160px;
  border: none;
  width: 100%;
  padding: 12px 16px; /* 用内边距控制内容间距，替代固定高度 */
  /* 如果导航栏设了固定高度，直接加 height: 100%; */
}

关键逻辑 #

• align-items: stretch会让flex容器的子元素自动匹配容器高度
• 用padding替代固定高度，既保证内容间距，又能让按钮随容器高度自适应
• box-sizing: border-box确保内边距不会让元素超出容器范围

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