修改

Question

我正在处理一个包含多个页面的表单，我想滚动进出视图。我必须使用绝对定位来强制div（页面）在一行中滚动;但是，这会导致父div高度不响应子节点（根据内容量加上添加到它们的动态内容，它们具有不同的高度）。

如何让父母的身高对孩子们保持敏感，同时仍允许我的页面在一行中滚动（我已经尝试过浮动）？

无论如何都可以在不使用绝对定位的情况下获得与jsFiddle演示相同的效果吗？

示例：jsFiddle Demo＆lt; ---如何将切换按钮保持在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无法解决这个问题。

Answer 2

＃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设置为overflow：hidden：

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

更新了jsfiddle： http://jsfiddle.net/FkNa2/193/

Answer 3

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

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

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

你可以看到小提琴here

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

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

查看小提琴here

Answer 4

为＃div2使用min-height

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

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

修改

4 个答案: