2

我正在使用 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。因此，首先它会显示根据内部内容分配的高度，在几分之一秒后，高度会更改为我分配的高度。

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

4

4 回答 4

1

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

或者，最初给 div 一个 display:none;

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

然后在 setHeight() 中，添加：

document.getElementById('rightContent').style.display = "block";
于 2012-12-20T11:27:50.243 回答
1

您可以使用 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-20T11:31:57.783 回答
1

当您使用 jQuery 标记您的问题时，您可以更改代码以使用 jQuery 的 DOM 就绪处理程序，该处理程序应该停止 FOUC（无样式内容的 Flash）。

试试这个：

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

    $(function() {
        setHeight();
    });
</script>
于 2012-12-20T11:32:12.290 回答
0

您可以<div>通过在样式表中设置它来设置页面呈现之前的高度。

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

您可以尝试使用jQuery 的 ready 事件来使您的函数更早地触发。它可能足够快以避免用户看到<div>变化的高度。

于 2012-12-20T11:30:20.523 回答