javascript - 调整包含绝对子项的父项高度

Question

我正在处理一个包含多个页面的表单，我想将这些页面滚动进/出 View 。我必须使用绝对定位来强制 div(页面)在一行中滚动；但是，这会导致父 div 高度无法响应子项(根据内容量和添加到其中的动态内容，子项具有不同的高度)。

如何让 parent 的高度响应 child 的高度，同时仍然允许我的页面在一行中滚动(我已经尝试过 float )？

有没有不用绝对定位也能达到jsFiddle Demo效果的方法？

示例:jsFiddle Demo <--- 如何让切换按钮保持在 div 下方，无论它们有多高？

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

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

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

<p>some content here </p>
<div class="container">
  <div id="div1"></div>
  <div id="div2"></div>    
</div>
<button>Toggle</button>

编辑

更新了 jsFiddle 以更好地显示问题。

Answer 1

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