Sử dụng Javascript để thay đổi kích thước một div để sàng lọc chiều cao gây nhấp nháy khi thu hẹp cửa sổ trình duyệt

Question

Bối cảnh:

tôi đã cố gắng để giải quyết câu hỏi StackOverflow yet another HTML/CSS layout challenge - full height sidebar with sticky footer tự mình sử dụng jQuery. Bởi vì thanh bên trong trường hợp của tôi có thể dài hơn nội dung chính phù hợp với trường hợp của comment 8128008. Điều đó làm cho nó không thể có một thanh bên dài hơn nội dung chính và có chân trang dính mà không gặp vấn đề gì khi thu hẹp cửa sổ trình duyệt.

Hiện trạng:

Tôi có một trang html với một div, mà được tự động kéo dài để lấp đầy màn hình. Vì vậy, nếu có khoảng trống bên dưới phần tử, tôi căng nó xuống:

Nhưng nếu khung nhìn trình duyệt nhỏ hơn div bản thân, không bị kéo giãn được thực hiện nhưng các thanh cuộn xuất hiện:

Tôi đã đính kèm jQuery vào sự kiện thay đổi kích thước của cửa sổ để đổi kích thước div, nếu cửa sổ trình duyệt không nhỏ và xóa mọi kích thước trong trường hợp khác. Điều này được thực hiện bằng cách kiểm tra xem chế độ xem có cao hơn hoặc nhỏ hơn document hay không. Nếu chế độ xem nhỏ hơn document, có vẻ như nội dung lớn hơn cửa sổ trình duyệt, tại sao không thay đổi kích thước; trong trường hợp khác, chúng tôi thay đổi kích thước div để điền vào trang.

if ($(document).height() > $(window).height()) { 
    // Scrolling needed, page content extends browser window 
    // --> No need to resize the div 
    // --> Custom height is removed 
    // [...] 
} else { 
    // Window is larger than the page content 
    // --> Div is resized using jQuery: 
    $('#div').height($(window).height()); 
} 

Vấn đề:

Cho đến nay, tất cả mọi thứ chạy tốt. Nhưng nếu tôi thu nhỏ cửa sổ trình duyệt, có trường hợp, trong đó div nên được thay đổi kích thước nhưng document lớn hơn chiều cao của window, tại sao tập lệnh của tôi giả định rằng không cần thay đổi kích thước và thay đổi kích thước của div.

Điểm thực sự là nếu tôi kiểm tra chiều cao của document bằng Firebug sau khi lỗi xuất hiện, chiều cao chỉ có giá trị được cho là có. Vì vậy, tôi nghĩ rằng, chiều cao của document được thiết lập với một chút chậm trễ. Tôi đã cố gắng chạy mã thay đổi kích thước chậm một chút nhưng nó không giúp đỡ.

Tôi đã thiết lập một cuộc biểu tình trên jsFiddle. Chỉ cần thu nhỏ cửa sổ trình duyệt từ từ và bạn sẽ thấy "nhấp nháy" div. Ngoài ra, bạn có thể xem đầu ra console.log() và bạn sẽ nhận thấy, trong trường hợp "nhấp nháy" chiều cao của document và chiều cao của window khác nhau thay vì bằng nhau.

Tôi đã nhận thấy hành vi này trong Firefox 7, IE 9, Chrome 10 và Safari 5.1. Bạn có thể xác nhận nó?

Bạn có biết liệu có khắc phục không? Hoặc là cách tiếp cận hoàn toàn sai? Làm ơn giúp tôi.

Answer 1

Ok - lau câu trả lời cũ của tôi và thay thế ...

Dưới đây là vấn đề của bạn:

Bạn đang dùng và so sánh cửa sổ và chiều cao văn bản, mà không tính đến thứ tự của các sự kiện ở đây ..

1. Window tải
2. Div phát triển chiều cao cửa sổ
3. Window co
4. chiều cao Document vẫn ở div chiều cao
5. chiều cao cửa sổ nhỏ hơn div chiều cao

Tại thời điểm này, chiều cao được thiết lập trước đó của div là giữ chiều cao tài liệu lớn hơn chiều cao cửa sổ và logic này bị hiểu sai: "Cuộn cần thiết, không cần mở rộng thanh bên" cháy, sai số

Do đó bị giật.

Để ngăn chặn nó, chỉ cần thay đổi kích thước div của bạn cùng với các cửa sổ trước khi đưa ra so sánh:

(function() { 
    var resizeContentWrapper = function() { 
      console.group('resizing'); 


      var target = { 
       content: $('#resizeme') 
      }; 

      //resize target content to window size, assuming that last time around it was set to document height, and might be pushing document height beyond window after resize 
     //TODO: for performance, insert flags to only do this if the window is shrinking, and the div has already been resized 
      target.content.css('height', $(window).height()); 

      var height = { 
       document: $(document).height(), 
       window: $(window).height() 
      }; 

      console.log('height: ', height); 


      if (height.document > height.window) { 
       // Scrolling needed, no need to externd the sidebar 
       target.content.css('height', ''); 

       console.info('custom height removed'); 
      } else { 
       // Set the new content height 
       height['content'] = height.window; 
       target.content.css('height', height['content']); 

       console.log('new height: ', height); 
      } 
      console.groupEnd(); 
     } 
    resizeContentWrapper(); 
    $(window).bind('resize orientationchange', resizeContentWrapper); 
})(jQuery); 

mỗi comment pmvdb của, tôi đổi tên $$ thành "mục tiêu" của bạn

Answer 2

Có lẽ tôi đang hiểu lầm vấn đề, nhưng tại sao bạn sử dụng Javascript? Điều này có vẻ giống như một vấn đề bố trí (CSS). Giải pháp của tôi mà không có JS: http://jsfiddle.net/2yKgQ/27/

Answer 3

$(window).bind('resize',function(){ 
    $("#resizeme").css("height",""); 

    if($("#resizeme").outerHeight() < $(window).height()){ 
     $("#resizeme").height($(window).height()); 
     $("body").css("overflow-y","hidden"); 
    }else{ 
     $("body").css("overflow-y","scroll"); 
    }   
});