Javascript 如何动态设置div标签的高度？_Javascript_Jquery_Html

Javascript 如何动态设置div标签的高度？

javascript jquery html

Javascript 如何动态设置div标签的高度？,javascript,jquery,html,Javascript,Jquery,Html,我正在使用ASP.NET和C。我需要根据屏幕分辨率更改div标记的高度。这就是我试过的 function setHeight() { var footer = document.getElementById('footerSection').offsetHeight; var h = document.documentElement.offsetHeight - footer; document.getElementById('rightConte

我正在使用ASP.NET和C。我需要根据屏幕分辨率更改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。因此，首先，它会显示根据内部内容指定的高度，在几秒钟后，高度会更改为我指定的高度

那么，是否可以在渲染之前或加载到窗口之前设置高度？实际上，我不希望用户看到高度的变化。

如何动态地将内容添加到div中，以便页面加载，然后在显示内容的同时设置高度

或者，最初为div提供一种显示样式：none

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

通过在样式表中设置，可以在呈现页面之前设置

的高度

但是，您的代码会查看文档和页脚的高度，以计算

的高度。在呈现页面之前，您不知道文档或页脚有多高

您可以尝试使用使函数提前启动。它可能足够快，可以避免用户看到高度的变化。

使用jquery dom ready处理程序可以实现这一点：

首先在顶部添加jquery插件（最新版本为1.8.2 ir 1.8.3）

那么这个,

<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>


函数setHeight（）{
var footer=document.getElementById（'footerSection'）.OffsetSight；
var h=document.documentElement.offsetHeight-页脚；
document.getElementById（'rightContent'）。style.height=h+“px”；
}
$（函数（）{
设置高度（）；
});

当您使用jQuery标记问题时，您可以将代码更改为使用jQuery的on-DOM就绪处理程序，该处理程序将停止FOUC（未设置样式的内容的闪存）

试试这个：

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

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


函数setHeight（）{
var footerTop=$（'#footerSection'）.offset（）.top；
var h=$（document）.height（）-footerTop；
$（#rightContent'）。高度（h）；
};
$（函数（）{
设置高度（）；
});

使用jquery的dom就绪处理程序而不是javascript

onLoad事件

。这就是您要寻找的-这太棒了-var h的值是多少。您在console.log或alert中看到过吗？多谢大家。document.ready（）比window.onload（）好，但是仍然有一些轻微的延迟。还有其他方法吗？谢谢大家。最后，我将使用@user1152309。但我使用的是display:none-in-body标记和reset-to-block-in-setheight。它做到了这一点，没有延迟。这更像是一个注释，除非您添加一些代码，说明OP如何实现您所描述的功能。谢谢..除了div标记，我使用的是body标记。

<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>

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

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