邊欄高度100％，在瀏覽器中div的大小發生變化

我的網站出了問題。在左邊我有一個側邊欄，旁邊有容器。目前，我發現這個javascript函數：邊欄高度100％，在瀏覽器中div的大小發生變化

$（文件）。就緒（函數（）{ $（「＃側邊欄」），高度（$（文件）.height（））; }）;

此腳本確保我的側邊欄是100％。此外，如果我調整屏幕大小，邊欄會自動更改高度。

問題是我的容器中有一個帶有移動div的儀表板，它們可以改變大小並且可以在下面堆疊。（例如：http://demo.webdeveloperplus.com/drag-drop-panels/）

如果我將這些div彼此疊放，側欄不會自動更改高度。當我將這些div放入容器中時，如何確保側邊欄也在變化高度？我需要循環腳本嗎？

希望有人能幫助我。

（PS。我沒有頁腳在我的網站上，以便側邊欄必須保持對文件的高度。（後臺））

來源

2011-11-01 Hans de Vries

好吧，這是兩個部分的答案。第一部分是您需要獲取瀏覽器視口的高度。第二部分是，當窗口調整大小時，您需要重新執行此功能。經過一些測試（IE 9，Chrome和FF）後，我發現這樣做效果不錯：

function getClientHeight() { 
    var retval = 0; 

    if (typeof (window.innerHeight) == 'number') { 
     retval = window.innerHeight; 
    } else if (document.documentElement && document.documentElement.clientHeight) { 
     retval = document.documentElement.clientHeight; 
    } else if (document.body && document.body.clientHeight) { 
     retval = document.body.clientHeight; 
    } 

    return retval; 
} 

$(document).ready(function() { 
    $(window).resize(function (event) { 
     $("#sidebar").height(getClientHeight()); 
    }); 

    $("#sidebar").height(getClientHeight()); 
});

來源

2011-11-01 14:52:08 csharphacker

它仍然不起作用。我在裏面粘貼了這段代碼，但是當把這些可拖動的盒子放在容器內時，#sidebar div仍然沒有拉伸高度。它具有瀏覽器整個窗口的高度，但是如果容器div變高，我會看到滾動並看到#sidebar保持不變。 –

我現在修復了這個問題。我用另一種方式來設置邊欄的高度始終爲100％。

對於誰想讓人們知道我是如何解決這個：

我給#sidebar風格：位置：固定;並將div放在div外側的側邊欄中，並製作了一個新的div #sidebarcontent。然後給了#sidebarcontent風格位置：絕對;並把它們放在正確的地方。我測試了這個跨瀏覽器，甚至在IE6上也能正常工作。

來源

2011-11-02 10:36:36

邊欄高度100％，在瀏覽器中div的大小發生變化

回答

相關問題