水平滑动，无绝对位置

Question

我使用jQuery UI在两个div之间水平滑动，使用position: absolute，但这会使我的粘性页脚与它们重叠并弄乱我的设计。我希望在不影响页脚的情况下水平无缝地实现两个div之间的滑动。

<script>
$( ".clickverify" ).click(function() {

var hideoptions = {  "direction" : "left",  "mode" : "hide"};
var showoptions = {"direction" : "right","mode" : "show"};

 $( ".step1" ).effect( "slide", hideoptions, 500);  
$( ".step2" ).delay(200).effect( "slide", showoptions, 500);


});
</script>

以下是我的CSS

 .step1,
    .step2 {
      width: 100%;
      position: absolute;
    }

    .slidecontainer {
      position: relative;
    }

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
 }

以下是我的示例HTML

<div class="step1">
step1
</div>

<div style="display:none" class="step2">
step2
</div>

 <footer class="center footer">
footer
  </footer>

修改的

这是一个JSFiddle https://jsfiddle.net/vfu2n7dk/2/，减少高度以查看溢出。此外，我不想使用min-height，因为它破坏了我在桌面上的整个网站设计。