Question

我有一个mvc asp.net c＃app。

我有一个页面，用户可以单击一个按钮。按钮单击事件调用我的jquery函数，该函数使用div.Load方法返回局部视图。我淡出了第二种观点。

我的_layout文件中也定义了一个永久页脚。

我注意到用户点击按钮时第一页消失了第二页很好地消失了但是，在第一页拼写和第二页开始淡入我的页脚之间跳起来填补空白。

我已经尝试在容器div上设置最小高度，但页脚仍会瞬间跳起来。

我该如何管理？

我的_layout页面的重要部分：

   <div class="container body-content" style="min-width:1000px; max-width:1000px;min-height:423px;">&nbsp;
        <div id="mainContent" style="height:423px; ">
            @RenderBody()           
        </div>
        <hr />
        <footer>
            <div id="divFooter" style="font-family:DIN; font-size:14px;float:right;margin-right:50px;margin-top:50px; ">
                <img src="images/facebook.png" />
                <img src="images/linked.png" />
                <img src="images/twitter.png" />
            </div>
        </footer>
    </div>

用于处理转换的jquery脚本：

$("#divProductsBanner").click(function () {
    var url = '/Products';
      $('#mainContent').css('display', 'none');
    $('#mainContent').load(url, function () { $('#mainContent').fadeIn(1000); $('#divFooter').css('display', ''); })
    return false;
});

Answer 1

一种选择是替换mainContent的内容而不是隐藏它：

$("#divProductsBanner").click(function () {
    var url = '/Products';
    $('#mainContent').html("<div style='width:100px;margin-left:auto;margin-right:auto'>loading...</div>");
    $('#mainContent').load(url, function () { $('#mainContent').fadeIn(1000); })
    return false;
});

部分视图更改之间不保留高度空间

1 个答案: