求助：Dropdown菜单展开不挤压按钮且推动Footer下移的实现方案

核心思路 #

放弃position: relative/absolute的常规方案，改用**max-height + overflow: hidden**的组合，既让下拉菜单保留在文档流中（能推动Footer），又能避免挤压导航按钮的尺寸。

代码修改示例 #

假设你的基础HTML结构如下：

<nav class="nav-bar">
  <button class="nav-item">Home</button>
  <!-- 把按钮和下拉菜单包裹在同一个容器里 -->
  <div class="dropdown-wrapper">
    <button class="nav-item">Projects</button>
    <ul class="dropdown-menu">
      <li>Project A</li>
      <li>Project B</li>
      <li>Project C</li>
    </ul>
  </div>
  <button class="nav-item">About</button>
</nav>
<footer class="page-footer">Footer Content</footer>

对应的CSS修改：

.nav-bar {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: #eee;
}

/* 给导航按钮固定尺寸，彻底避免挤压变形 */
.nav-item {
  width: 100px;
  height: 42px;
  border: none;
  background: #ccc;
  cursor: pointer;
}

.dropdown-wrapper {
  /* 仅用于包裹按钮和菜单，不需要特殊定位 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dropdown-menu {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  background: #fff;
  border: 1px solid #ddd;
  width: 100px; /* 和按钮宽度保持一致 */
  /* 初始状态隐藏，max-height设为0 */
  max-height: 0;
  overflow: hidden;
  /* 添加过渡动画让展开更平滑 */
  transition: max-height 0.3s ease-in-out;
}

/* hover容器时展开菜单 */
.dropdown-wrapper:hover .dropdown-menu {
  /* 设置足够大的max-height（超过菜单实际高度即可） */
  max-height: 300px;
}

.dropdown-menu li {
  padding: 0.6rem;
}

.page-footer {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #333;
  color: #fff;
}

原理说明 #

1. 固定按钮尺寸：给所有导航按钮设置固定的宽高，不管下拉菜单是否展开，按钮本身的尺寸都不会变化。
2. 文档流内的菜单控制：用max-height替代display: none或position: absolute，菜单始终在文档流中，展开时容器高度增加，自然推动下方的Footer下移。
3. 平滑过渡：通过transition属性给max-height添加动画，让菜单展开收起的过程更自然。

如果你的现有结构和示例不同，只需要把目标按钮和下拉菜单放在同一个父容器里，然后套用上述max-height的控制逻辑即可。

内容的提问来源于stack exchange，提问作者Maťo Valapka