How to set the height of div tag dynamically?

Question

I am using ASP.NET and C#. I need to change the height of the div tag based on the screen resolution. This is what i tried.

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

I am calling this script from onload of body tag like this.

<body onload="setHeight();">

It is working, But this height is assigning to that div after the rendering get finished. So that first it displays with the height that assigned based on the content inside that after some fraction of second the height get changed to what i assigned.

So is it possible to set the height before rendering or before it gets loaded into the window? Actually i do not want user to see that height change.

use `jquery's dom ready handler` instead javascript `onLoad event`. — Jai, Dec 20 '12 at 11:27
This is what you looking for - http://stackoverflow.com/a/7053197/1499781 And this is just awesome - http://dustindiaz.com/smallest-domready-ever — Zoltan Toth, Dec 20 '12 at 11:28
what is the value of var h. have you seen it in console.log or by alert? — polin, Dec 20 '12 at 11:29
Thanks to all. The document.ready() is better than window.onload(), But some slight delay is still there.Is there any other way to do this? — Giri, Dec 21 '12 at 09:56
Thanks to all. Finally i am going with the idea of @user1152309.But i am using that disply:none in body tag and reset to block in setheight.It did the trick there is no delay. — Giri, Dec 24 '12 at 04:54

score 1 · Accepted Answer · answered Dec 20 '12 at 11:27

1

How about adding the content to the div dynamically, so that the page loads and then the height gets set at the same time as the content shows up?

Or, give the div initially a style of display:none;

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

and then in setHeight(), add:

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

answered Dec 20 '12 at 11:27

ForOhFor

686
8
15

This is more of a comment, unless you add some code showing how the OP can achieve what you describe. – Rory McCrossan Dec 20 '12 at 11:29
Thanks..Except div tag i am using body tag. – Giri Dec 24 '12 at 04:55

score 1 · Answer 2 · answered Dec 20 '12 at 11:31

You can achieve this with jquery dom ready handler:

first add a jquery plugin at top (latest one 1.8.2 ir 1.8.3)

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

then this:

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

score 1 · Answer 3 · answered Dec 20 '12 at 11:32

As you have tagged your question with jQuery, you could change your code to use jQuery's on DOM ready handler which should stop the FOUC (Flash of unstyled content).

Try this:

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

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

score 0 · Answer 4 · answered Dec 20 '12 at 11:30

You can set the height of the <div> before the page gets rendered, by setting it in a stylesheet.

However, your code looks at the height of the document and the footer in order to calculate what the height of the <div> should be. Until the page is rendered, you don't know how tall the document or the footer are.

You could try using jQuery's ready event to make your function fire earlier. It might be quick enough to avoid the user seeing the <div> change height.

How to set the height of div tag dynamically?

4 Answers4