$（window）.resize函數會導致div消失

在我的設計中，我想在重新調整瀏覽器大小時保留一個按鈕（firefox）。按鈕位於相對DIV中，當高度太小時，它將DIV設置爲絕對值。但是在重新調整窗口大小時，DIV閃爍並消失/隨機出現。

這是我的代碼：

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title></title> 
     <style> 
      body { 
       /*overflow: hidden;*/ 
       border: 2px dotted lightblue; 
       position: absolute; 
       top: 0; 
       right: 0; 
       bottom: 0; 
       left: 0; 
       margin: 0; 
       padding: 0; 
      } 
      .maxheight { 
       max-height: 100%; 
       /*overflow: hidden;*/ 
      } 
      .scrollable { 
       overflow: auto; 
       height: 100%; 
       background-color: yellow; 
       border: 1px solid black; 
       position: relative; 
       max-height: 100%; 
       bottom: 0px; 
      } 
      .buttons { 
       background-color: red; 
       border: 1px solid black; 
       position: relative; 
       bottom: 0px; 
      } 
     </style> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script> 
      $(window).resize(function() { 
       var pageHeight = $("#page").height(); 
       var buttons = $(".buttons"); 
       var elementHeight = $(buttons).height() 
       var elementTop = $(buttons).position().top; 
       var total = pageHeight - (elementHeight + elementTop); 
       if (pageHeight - (elementHeight + elementTop) < 0) { 
        $(buttons).css({ 
         'position': 'absolute', 
         'width': $(".scrollable").width() 
        }); 
       } else { 
        $(buttons).css({ 
         'position': 'relative', 
         'width': $(".scrollable").width() 
        }); 
       } 
      }); 
     </script> 
    </head> 
    <body id="page"> 
     <div class="maxheight"> 
      <h2>title</h2> 
      <div class="scrollable"> 
       This is content.<br /> 
       This is content.<br /> 
       This is content.<br /> 
       This is content.<br /> 
       This is content.<br /> 
       This is content.<br /> 
       This is content.<br /> 
       This is content.<br /> 
       This is content.<br /> 
       This is content.<br /> 
       This is content.<br /> 
       This is content.<br /> 
       This is content. 
      </div> 
      <div class="buttons"> 
       <button type="button" value="test">test</button> 
       <button type="button" value="test">test</button> 
      </div> 
     </div> 
    </body> 
</html>

小提琴：http://jsfiddle.net/GxDES/

來源

2013-08-06 Marco H

這裏是一個FIDDLE

我認爲問題的一部分是不是絕對和相對的jQuery的設置top。當它切換到絕對位置時，它不知道自己的位置，所以根據瀏覽器的不同，它可能會有所不同。

if (pageHeight - (elementHeight + elementTop) < 0) { 
    $(buttons).css({ 
     'position': 'absolute', 
     'top': elementTop + 'px', //ADDED THIS LINE 
      'width': $(".scrollable").width() 
    }); 
} else { 
    $(buttons).css({ 
     'position': 'relative', 
     'top': '0px', //ADDED THIS LINE 
      'width': $(".scrollable").width() 
    }); 
}

我還添加了height到你的CSS .buttons，使紅色背景相一致，並保持。

希望有所幫助。

編輯：

我改變了一件事。將.buttons定位在.scrollable的正下方。這種方式更好一點。 http://jsfiddle.net/GxDES/2/

var pos = $('div.scrollable').position().top + $('div.scrollable').height(); 
'top': pos + 'px', //CHANGED THIS LINE

來源

2013-08-06 13:27:09 James

下面是簡化呼叫到一定程度有效的解決方案：

$(window).resize(function() { 
    $('.buttons').fixToBottom().css('width', $('.scrollable').width()); 
});

小提琴：http://jsfiddle.net/XVNQk/

來源

2013-08-06 13:46:22

$（window）.resize函數會導致div消失

回答

相關問題