Javascript 调整包含绝对子级的父级高度

我正在处理一个有多个页面的表单，我想在视图中滚动/滚动。我必须使用绝对定位来强制div（页面）在一行中滚动；但是，这会导致父div高度不响应子div（子div的高度根据内容量和添加到子div的动态内容而变化）

我怎样才能使父母的高度对孩子们做出反应，同时仍然允许我的页面在一行中滚动（我已经尝试过浮动）

有没有办法在不使用绝对定位的情况下实现与JSFIDLE演示相同的效果

---

示例：检查子图元的高度和位置，计算总高度并将其应用于父图元。绝对定位的元素有其自己的布局上下文，因此仅CSS无法解决此问题。

div1和div2中的高度导致.container div溢出：

将#div1和#div2的高度设置为与其容器相同的高度：

#div1{
  width: 500px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 0px;
  left: 0px;
}

#div2{
  width: 500px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
}

或将.container设置为溢出：隐藏：

.container {
  width: 800px;
  position: relative;
  overflow:hidden
  height: 100px;
}

更新的JSFIDLE:

---

根据您的需要，我更新了您的小提琴：

按钮位置根据最大绝对元素的高度固定在文档加载时：

 $(function(){   
  $('#container').height(Math.max($('#div1').height(),$('#div2').height()));
});

你可以看到小提琴

每次切换完成后，都会重新计算按钮位置，您可以使用其中一个切换的完整选项来处理它：

$div2.toggle('slide', {
    direction: 'left', 
    complete:function(){
       $('#container').height($('#'+currentDiv).height());
    }
}, 'slow');

请参见小提琴

将最小高度用于#div2

---

这几乎是可行的，除了当我尝试在切换之前验证页面时，我会将验证消息添加到绝对定位的div中，这会将div推到切换按钮上。这是否意味着我需要计算每个错误消息的高度，并在验证时将其添加到父容器中？不确定是否理解，如果您的div是绝对定位的，则应该被错误消息向下推。如果不是太复杂的话，你能更新小提琴吗？我已经用一个跨度来更新了问题中的小提琴，以模拟表单验证。单击跨度约6次以上可体验我的问题。我需要在添加div时调整其高度，它们可以是任何高度，并且可以随时更改。我不希望溢出被隐藏，我希望容器在div附加验证错误时展开。关闭，但我也需要div在它变大的时候把事情推下去。如果div2和div1的位置是绝对的，你就无法做到这一点。您应该将其从css中去掉，并尝试对水平动画使用jquery.animate（）。我有一个项目要交，所以我没有时间做一个JSFIDLE，但希望这是一个有用的指针。我尝试使用jquery动画，问题是这看起来很糟糕，因为一个div滑入另一个div的下方，然后向上移动以填充旧div的位置。

$div2.toggle('slide', {
    direction: 'left', 
    complete:function(){
       $('#container').height($('#'+currentDiv).height());
    }
}, 'slow');

    #div2{
    width: 500px;
    min-height: 100px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
}