咨询：底部内容切换时上方内容下移填充空间的实现方案

Hey there! Let's work through this layout challenge you're dealing with—sounds like you already found a solid starting point with the max-height approach, since JavaScript wasn't giving you the smooth results you wanted. Let's refine that method to get exactly the behavior you need: a fixed bottom section with persistent and toggleable content, where the main content above automatically adjusts to fill the space.

Why max-height is the right call here #

Using CSS max-height with transitions is way more reliable than JavaScript for this kind of dynamic layout. It avoids janky layout calculations that can happen when JS tries to read/write element heights, and it gives you smooth, native-looking transitions out of the box.

Step-by-step implementation #

Here's a polished version of the approach that fixes common edge cases and ensures the main content always fills the available space:

1. Set up the core structure

   • A main content area that takes up most of the viewport
   • A fixed bottom container split into two parts: always-visible content, and toggleable content

2. Style the fixed bottom section

   • Pin it to the bottom with position: fixed
   • Wrap the toggleable content in a container with max-height: 0 and overflow: hidden to start hidden
   • Add a transition to the toggleable container for smooth height changes

3. Adjust the main content

   • Add padding-bottom to the main content equal to the maximum possible height of the fixed bottom section (always-visible height + toggleable content max height). This ensures the main content never gets covered by the expanded bottom section, and automatically shifts to fill the space when the bottom content collapses.

Full code example #

<div class="main-content">
  <h1>主内容区域</h1>
  <p>这里的内容会随着底部区域的展开或收起自动调整位置，确保不会被底部内容遮挡，同时填充可用空间。</p>
  <p>更多示例内容... 更多示例内容... 更多示例内容... 更多示例内容...</p>
</div>

<div class="fixed-footer">
  <div class="persistent-content">
    <p>这部分内容始终显示</p>
    <button class="toggle-trigger">点击展开/收起额外内容</button>
  </div>
  <div class="toggleable-content">
    <p>这是可以隐藏/显示的内容</p>
    <p>更多可变内容行...</p>
    <p>再一行可变内容</p>
  </div>
</div>

/* 重置基础样式，避免默认边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-content {
  /* 底部容器的最大总高度：持久内容高度(约80px) + 可变内容最大高度(约180px) */
  padding-bottom: 260px;
  min-height: 100vh;
  padding: 2rem;
  background-color: #f8f9fa;
}

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 1px solid #dee2e6;
}

.persistent-content {
  padding: 1.5rem;
}

.toggleable-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  padding: 0 1.5rem;
  background-color: #f8f9fa;
}

/* 展开状态的样式 */
.toggleable-content.expanded {
  max-height: 180px; /* 设置为可变内容的最大预期高度 */
  padding: 1.5rem;
  border-top: 1px solid #dee2e6;
}

.toggle-trigger {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

// 简单的切换逻辑，比复杂的JS高度计算轻便多了
document.querySelector('.toggle-trigger').addEventListener('click', () => {
  document.querySelector('.toggleable-content').classList.toggle('expanded');
});

Key tips for this approach #

• Calculate padding-bottom correctly: Make sure the value matches the total height of the footer when fully expanded—this prevents the main content from being hidden under the footer.
• Use a generous max-height: If you're not sure the exact height of the toggleable content, pick a value that's definitely larger than it could ever be (e.g., 500px). The transition will still work smoothly, and the container will only expand to fit its actual content.
• Skip transitions if needed: If you don't want animation, just remove the transition property from the toggleable container—this will make the content show/hide instantly.

This method gives you the seamless space-filling behavior you want, with smooth transitions and no janky JavaScript.

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