高度空間不被保存在部分視圖更改之間

我有一個mvc asp.net c＃應用程序。高度空間不被保存在部分視圖更改之間

我有一個頁面，用戶可以點擊一個按鈕。按鈕單擊事件調用我的jquery函數，它使用div.Load方法返回一個局部視圖。我淡入第二視圖。

我也在我的_layout文件中定義了一個永久頁腳。

我注意到，當用戶點擊該按鈕第一頁消失第2頁很好地淡入但是，第一頁dispapearing和第二頁開始之間淡入我的頁腳跳起來填補了國內空白。

我曾嘗試設置容器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; 
});

來源

2016-02-10 Andrew Simpson

看起來你的頁腳只是「下」的主要內容，而不是固定在底部。最安全的選擇是通過CSS將頁腳固定到底部。或者，您可以在mainContent中放置一個「加載」圖像，而不是隱藏mainContent，將其內容替換爲加載圖像（或文本），然後它的大小始終相同，並且頁腳不會跳過。 –

@ freedomn -m是的，我確實想過一個佔位符，但是你會知道css要修復底部嗎？ –

http://stackoverflow.com/questions/10056583/fixed-header-footer-and-sidebars-with-scrolling-content-area-in-center –

一種選擇是，以取代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; 
});

來源

2016-02-10 14:39:01

是的，我會使用這個，如果我會'進展標題'，但我不知道。我更喜歡白色空間。但是，謝謝 –

高度空間不被保存在部分視圖更改之間

回答

相關問題