HTML5中展开/折叠details标签时动态调整div高度的问题

我明白你遇到的困扰了——你把多个<details>标签放在一个通过jQuery设置高度为窗口高度的容器里，当展开某个<details>后，它的内容高度超过屏幕时，容器的蓝色背景就没法覆盖全部内容了对吧？

问题根源 #

你当前用jQuery给.container设置的是固定的像素高度（等于页面加载或窗口resize时的窗口高度），这个值是静态的，不会随着<details>展开/收起导致的内容高度变化而自动更新。所以当内容变多超过容器的固定高度时，容器不会自动扩展，自然就出现样式失效的情况。

最优解决方案：用CSS代替jQuery实现自适应 #

其实完全不需要用jQuery来设置高度，CSS原生就能完美解决这个问题，而且更高效、更符合响应式设计：

方案1：容器默认占满屏幕，内容过多时自动扩展

如果你希望容器至少占满整个窗口高度，当内容超过屏幕时自动拉长容器，直接给.container设置min-height: 100vh即可：

.container {
  background-color: blue;
  min-height: 100vh; /* 最小高度等于当前窗口高度 */
  padding: 1rem; /* 可选，给内容加内边距 */
  box-sizing: border-box; /* 确保内边距不会超出容器高度 */
  margin: 0; /* 清除默认margin避免出现多余滚动条 */
}

这样容器会自动适应内容高度，同时保证在内容较少时仍然占满屏幕，完全不需要JS代码。

方案2：容器固定屏幕高度，内容过多时内部滚动

如果你的需求是容器始终保持窗口高度，内容超过时在容器内部滚动（而不是拉长容器），可以这样设置：

.container {
  background-color: blue;
  height: 100vh; /* 固定高度为窗口高度 */
  overflow-y: auto; /* 垂直方向内容溢出时显示滚动条 */
  padding: 1rem;
  box-sizing: border-box;
  margin: 0;
}

这个方案下，无论<details>展开多少内容，容器高度都不会变，内容会在容器内部滚动，蓝色背景也能完整覆盖容器。

为什么原来的jQuery方案不行？ #

你的jQuery代码只在页面初始化和窗口大小改变这两个时机设置容器高度，但<details>的展开/收起是动态的内容变化，这个事件不会触发resize，所以容器高度不会被重新计算，导致样式失效。如果非要用JS处理，还得额外监听<details>的toggle事件，但显然CSS方案更简洁。

补充：你原来的代码参考 #

你的HTML结构：

<div class='container' style='background-color:blue;'> 
  <details> 
    <summary>Copyright 1999-2014.</summary> 
    <p> - by Refsnes Data. All Rights Reserved.</p> 
    <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> 
  </details> 
  <details> 
    <summary>Copyright 1999-2014.</summary> 
    ............................. 
  </details> 
  <details> 
    <summary>Copyright 1999-2014.</summary> 
    ............................. 
  </details> 
  <details> 
    <summary>Copyright 1999-2014.</summary> 
    ............................. 
    <details> 
      <summary>Copyright 1999-2014.</summary> 
      ............................. 
    </details> 
  </details> 
</div>

原来的jQuery代码：

$(document).ready(function () { 
  $('.container').css('height', $(window).height()); 
} ); 
$(window).resize(function () { 
  $('.container').css('height', $(window).height()); 
});

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