如何縮放divs，當我最小化瀏覽器，以便divs不會互相摺疊

我有一個小問題。怎麼可能設置2個div的高度，以便它們不會摺疊，而是如果我最小化窗口而動態縮放？我這樣做的JS：如何縮放divs，當我最小化瀏覽器，以便divs不會互相摺疊

$(document).ready(function(){ 
    var footer = document.getElementById('footer').offsetHeight; 
    var sidebar = document.getElementById('sidebar').offsetHeight; 
    document.getElementById('sidebar').style.height = sidebar - footer + 'px'; 

});

這是工作，但不是當我儘量減少，我一定要做到在功能和window.load時左右打電話了嗎？現在的問題是，當我儘量減少瀏覽器的div又要走了對方..

感謝

來源

2012-06-10 doniyor

最小化窗口最小化到任務欄？或調整到「最小尺寸」？ –

我通過點擊瀏覽器的'最小化'按鈕來最小化窗口（瀏覽器）。我希望這個div應該像窗戶完全打開時一樣。但現在當我最小化窗口時，一個div覆蓋另一個。具體：當窗口最小化時，我的側欄覆蓋了頁腳。我不想要它。我希望無論我如何縮放窗口，側欄都應該留下一段距離。 – doniyor

我想你需要綁定到resize事件

$(document).ready(function(){ 
    var sidebar = document.getElementById('sidebar').offsetHeight; 
    $(window).resize(function(){ 
    var footer = document.getElementById('footer').offsetHeight; 
    document.getElementById('sidebar').style.height = sidebar - footer + 'px'; 
    }); 
});

來源

2012-06-10 08:06:36

這看起來不錯，但通過這我有代碼中的另一個問題。所以現在意味着每當窗口被繪製時，它將再次設置高度。現在如果我調整了2次，邊欄變小了兩倍。 :)）。 – doniyor

這是因爲您在每個調整大小的計算中使用側邊欄。樣本中更新的代碼。仍然不確定是否它是你想要的，但我相信你可以找到如何讓它工作，因爲你有調整 –

是的，但它應該調整邊欄每次，任何想法的錯誤是什麼？ :(。 – doniyor

這裏是解決方案誰也爲那些曾經尋找這種設置...

<script type="text/javascript"> 
$(document).ready(function(){ 
    var winh = document.body.clientHeight; 
    var footer = document.getElementById('footer').offsetHeight; 
    document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px'; 
    document.getElementById('sidebar').style.marginBottom = footer + 'px'; 
$(window).resize(function(){ 
    var winh = document.body.clientHeight; 
    var footer = document.getElementById('footer').offsetHeight; 
    document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px'; 
    document.getElementById('sidebar').style.marginBottom = footer + 'px'; 
    }); 
}); 
</script>

驗證碼無論是在的document.ready並調整大小的過程中設置側邊欄的高度動態。特別感謝Bart的幫助！

來源

2012-06-10 19:53:06 doniyor

如何縮放divs，當我最小化瀏覽器，以便divs不會互相摺疊

回答

相關問題