如何動態設置div標籤的高度？

我正在使用ASP.NET和C＃。我需要根據屏幕分辨率更改div標籤的高度。這是我的嘗試。如何動態設置div標籤的高度？

function setHeight() { 
     var footer = document.getElementById('footerSection').offsetHeight; 
     var h = document.documentElement.offsetHeight - footer; 
     document.getElementById('rightContent').style.height = h+"px";  
};

我從這個body標籤的onload調用這個腳本。

<body onload="setHeight();">

它正在工作，但是這個高度是在渲染完成後分配給那個div的。因此，首先它會顯示根據內部內容分配的高度，然後在高度的一小部分變爲我分配的內容之後。

那麼有可能在渲染之前或者在它被加載到窗口之前設置高度？其實我不希望用戶看到高度變化。

來源

2012-12-20 Giri

使用'jQuery的DOM準備handler'替代的javascript'的onLoad event'。 – Jai

這就是你要找的 - http://stackoverflow.com/a/7053197/1499781而這只是真棒 - http://dustindiaz.com/smallest-domready-ever –

什麼是var h的價值。你有沒有在console.log或alert中看到它？ – polin

如何動態地將內容添加到div，以便在內容顯示的同時加載頁面，然後設置高度？或者，給div初始一種顯示風格：無;

<div id="rightContent" style="display:none">

，然後調用setHeight（），添加：

document.getElementById('rightContent').style.display = "block";

來源

2012-12-20 11:27:50 ForOhFor

這是更多的評論，除非你添加一些代碼來顯示OP如何實現你描述的內容。 –

謝謝..除了div標籤我正在使用身體標記。 – Giri

您可以設置<div>的高度之前的頁面獲取呈現，通過在樣式表設置它。

但是，您的代碼將查看文檔和頁腳的高度，以便計算<div>的高度應爲多少。在呈現頁面之前，您不知道文檔或頁腳有多高。

您可以嘗試使用jQuery's ready event使您的功能更早啓動。它可能足夠快以避免用戶看到更改高度<div>。

來源

2012-12-20 11:30:20

您可以使用jQuery的DOM準備處理程序實現這一點：

首先在頂部添加一個jQuery插件（最新一個1.8.2 IR 1.8.3）

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>

那麼這個：

<script> 
function setHeight() { 
    var footer = document.getElementById('footerSection').offsetHeight; 
    var h = document.documentElement.offsetHeight - footer; 
    document.getElementById('rightContent').style.height = h+"px";  
} 

$(function(){ 
    setHeight(); 
}); 
</script>

來源

2012-12-20 11:31:57 Jai

正如你用jQuery標記了你的問題，你可以改變你的代碼，使用jQuery的DOM準備好處理程序，它應該停止FOUC（Flash的unstyled內容）。

試試這個：

<script type="text/javascript"> 
    function setHeight() { 
     var footerTop = $('#footerSection').offset().top; 
     var h = $(document).height() - footerTop; 
     $('#rightContent').height(h); 
    }; 

    $(function() { 
     setHeight(); 
    }); 
</script>

來源

2012-12-20 11:32:12

如何動態設置div標籤的高度？

回答

相關問題