將DIV的高度設置爲「n」整除。重新計算窗口調整大小

我有一個網站來構建說明重複邊框的功能。邊框圖的高度爲232像素，我需要確保我的內容區域始終可以被此數字整除以避免裁剪邊框（總是四捨五入）。將DIV的高度設置爲「n」整除。重新計算窗口調整大小

由於在幾年前提出了類似的問題，我有解決方案的一部分，但是當瀏覽器窗口重新調整大小時，它不重新計算高度;重要的這個響應網絡時代：

$(function(){ 
    var curHeight = parseInt($("#content_area").height()), 
     newHeight = Math.ceil(curHeight/232) * 232; 
    $("#content_area").height(newHeight); 
    });

任何人都可以幫忙嗎？

來源

2014-01-27 user2265915

無論窗戶的高度如何，您都需要將容器保持在同一高度？ –

不，隨着瀏覽器窗口寬度的減少/增加，內容的高度會增加或減少。我需要容器的高度增加/減少，以232的倍數爲單位。請參閱此處的示例更改瀏覽器窗口的寬度以查看邊框中斷）：[link] http://fenrisgames.cloudlevel.me/ – user2265915

然後你不覺得容器的高度應該與窗戶的高度成正比，然後你的魔法數字是232. –

下解決了這個問題：

$('document').ready(function() { 
var heightAdj = (function() { 
    $('.auto-height').css('height', 'auto'); 
    var curHeight = parseInt($(".auto-height").height()); 
    var newHeight = Math.ceil(curHeight/232) * 232; 
    $(".auto-height").height(newHeight); 
}); 
$(window).resize(heightAdj); 

$(window).trigger('resize');

}）;

來源

2014-02-04 22:12:26 user2265915

$(window).resize(function() { 
    var curHeight = parseInt($("#content_area").height()), 
    newHeight = Math.ceil(curHeight/232) * 232; 
    $("#content_area").height(newHeight); 
});

來源

2014-01-27 12:17:23 CRABOLO

謝謝，但這似乎不適用於頁面加載或瀏覽器重新大小。 – user2265915

嘗試.resize()：

$(function(){ 
     $(window).on('resize', function(){ 
      var curHeight = parseInt($("#content_area").height()), 
       newHeight = Math.ceil(curHeight/232) * 232; 
     $("#content_area").height(newHeight); 
     }).resize(); // <---calculates on dom ready 
    });

來源

2014-01-27 12:28:45 Jai

謝謝你的回覆。這適用於瀏覽器加載，但不適用於重新大小。 – user2265915

據我的理解去我想你不應該使用

$(window).resize()

你還是使用

$(window).on('resize', function(){ 
    // Alien Arrays Code 
});

http://api.jquery.com/on/

史蒂夫

來源

2014-01-27 12:33:12 steveHimself

使用resize()和trigger()

$(function(){ 

    /** first bind event on resize */ 
    $(window).on('resize', function(){ 
      var curHeight = parseInt($("#content_area").height()), 
       newHeight = Math.ceil(curHeight/232) * 232; 
     $("#content_area").height(newHeight); 
     }); 
/* then trigger on document load */ 
    $(window).resize(); 
    //or 
    $(window).trigger("resize"); 
    });

來源

2014-01-27 12:34:09

試試這個

function doResize() { 

    var curHeight = parseInt($("#content_area").height()), 
     newHeight = Math.ceil(curHeight/232) * 232; 

    $("#content_area").height(newHeight); 
} 
$(document).ready(function (e) { 
    doResize(); 
}); 
window.onresize = doResize;

來源

2014-01-28 15:50:42

謝謝，我試過了，但它仍然沒有重新計算窗口重新調整大小的容器高度。我設置了一個測試頁面，並將其他所有內容除去：[link] http://cloudlevel.me/test。初次加載時，一切都很好。如果我然後減少瀏覽器寬度，內容的寬度會增加，直到它超出容器邊界。 – user2265915

我想出了你頁面中缺少的東西。只需將'overflow：auto;'添加到'content_area'樣式即可。 –

對不起，你誤解了。我需要包含DIV重新調整內容的大小（以232px爲增量）。感謝您的幫助！ – user2265915

將DIV的高度設置爲「n」整除。重新計算窗口調整大小

回答

相關問題