Question

我正在使用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="setHeight();">

它正在工作，但这个高度在渲染完成后分配给该div。因此，首先它显示基于内部内容分配的高度，经过一段时间后，高度变为我指定的高度。

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

Answer 1

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

或者，最初给div显示一种样式：none;

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

然后在setHeight（）中添加：

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

Answer 2

你可以用jquery dom ready handler来实现这个目的：

首先在顶部添加一个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>

Answer 3

正如您使用jQuery标记了您的问题，您可以更改您的代码以在DOM就绪处理程序上使用jQuery，这应该会停止FOUC（无格式内容的Flash）。

试试这个：

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

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

Answer 4

您可以在页面呈现之前设置<div>的高度，方法是在样式表中设置它。

但是，您的代码会查看文档和页脚的高度，以便计算<div>的高度。在呈现页面之前，您不知道文档或页脚的高度。

您可以尝试使用jQuery's ready event让您的功能更早开火。它可能足够快，以避免用户看到<div>更改高度。

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

4 个答案: