How do I set the TRUE actual height of a div?

I want to have a webpage with a certain layout:

header
main
footer

The header should be on top of the SCREEN, the footer below on the SCREEN and the main part should fill in the rest. If the main part is just empty, the header and footer should be on top and below with a lot of empty space in the middle; if the main part is thousands of lines, still the same for the header and footer, but now the main part is scrollable.

The code I supplied does that ... EXCEPT ...

The footer obviously isn't 50px (as defined by the CSS) but a lot more. Thus one get's 2 scrollbars: on on the main part (as wanted) and one on the outside (eew: ugly!) This is because the scrollHeight returns the height of the div --- as stated in the CSS !!! In other words, should I fill up the footer dynamically with a CMS, for instance, I want an image there (of random height) then either I get the perfect layout (if my image was <=50px) OR my layout gets screwed up with the ugly extra scrollbar (image >50px.)

In other words: scrollHeight does not give the ACTUAL height of a div, which is what I want.

Why not remove the height: 50px from the CSS? Case solved! True ... but suppose I would want a empty footer of 50px per default? Just for the looks of it?

Does anyone have a solution? I need to have a script for IE7+, FF3+, Opera9+. (I'll assume other browsers, such as Chrome, will behave more or less like FF3+)

many thanks!
<html>
<head>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }
      #header {
      	height: 100px;
      	background-color: #0000aa;
      }
      #main {
      	width: 100%;
      	background-color: #00aaaa;
      }
      #footer {
      	height: 50px;
      	background-color: #aa00aa;
      }
    </style>
    <script type="text/javascript">
      window.onload = reSizeMain;
      window.onresize = reSizeMain;
 
      function getWindowHeight() {
        var windowHeight = 0;
        if (typeof(window.innerHeight) == 'number') {
          windowHeight = window.innerHeight;
        } else {
          if (document.documentElement && document.documentElement.clientHeight) {
            windowHeight = document.documentElement.clientHeight;
          } else {
            if (document.body && document.body.clientHeight) {
              windowHeight = document.body.clientHeight;
            }
          }
        }
        return eval(windowHeight);
      }
 
      function reSizeMain(id) {
        if (document.getElementById("main")) {
          var heightHeader = eval(document.getElementById("header").scrollHeight);
          var heightFooter = eval(document.getElementById("footer").scrollHeight);
          document.getElementById("main").style.height = eval(getWindowHeight()-(heightHeader+heightFooter))+"px";
        } else {
          alert("Update your Browser, Fred Flintstone!\nEven Captain Caveman adepts to its surroundings!\nHe invented Fire! Foxy of 'im, eh?");
          // ... in other words: don't bother with non-getElementById browsers
        }
      }
    </script>
 
</head>
<body>
    <div id="header">
      Bla bla.
    </div>
	<div id="content-wrap" style="overflow: visible;">
		<div id="main" style="overflow: auto; height: 100%;">
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    </div>
    </div>
    <div id="footer">
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    </div>
 </body>
</html>

Open in new window

kerebornAsked:
Who is Participating?
 
JohnSixkillerCommented:
It works for all browsers. But  there are some HTML standards to follow.

1. Add DOCTYPE declaration to force browsers use standard render
2. If you want fixed height of footer tell browser what to do if content overflows. By specifying overflow:auto, browser adds scrollbar if needed.
3. If you dont want fixed height, do not set height attribute at all.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }
      #header {
        height: 100px;
        background-color: #0000aa;
      }
      #main {
        width: 100%;
        background-color: #00aaaa;
      }
      #footer {
        /*height: 50px;*/
        /*overflow:auto;*/
        background-color: #aa00aa;		
      }
    </style>
    <script type="text/javascript">
      window.onload = reSizeMain;
      window.onresize = reSizeMain;
 
      function getWindowHeight() {
        var windowHeight = 0;
        if (typeof(window.innerHeight) == 'number') {
          windowHeight = window.innerHeight;
        } else {
          if (document.documentElement && document.documentElement.clientHeight) {
            windowHeight = document.documentElement.clientHeight;
          } else {
            if (document.body && document.body.clientHeight) {
              windowHeight = document.body.clientHeight;
            }
          }
        }
        return eval(windowHeight);
      }
 
      function reSizeMain(id) {
        if (document.getElementById("main")) {
          var heightHeader = parseInt(document.getElementById("header").offsetHeight);		  
          var heightFooter = parseInt(document.getElementById("footer").offsetHeight);		  		
          document.getElementById("main").style.height = eval(getWindowHeight()-(heightHeader+heightFooter))+"px";
        } else {
          alert("Update your Browser, Fred Flintstone!\nEven Captain Caveman adepts to its surroundings!\nHe invented Fire! Foxy of 'im, eh?");
          // ... in other words: don't bother with non-getElementById browsers
        }
      }
    </script>
 
</head>
<body>
    <div id="header">
      Bla bla.
    </div>
        <div id="content-wrap" style="overflow: visible;">
                <div id="main" style="overflow: auto; height: 100%;">
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    </div>
    </div>
    <div id="footer">
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    </div>
 </body>
</html>

Open in new window

0
 
JohnSixkillerCommented:
Hi, use DIV.offsetHeight
0
 
JohnSixkillerCommented:
You can also consider using absolute layout.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style type="text/css">
      body,html {
        margin: 0;
        padding: 0;
		height:100%
      }
      #header {
		position:	absolute;
		width:		100%;
		top:		0px;
        height:		100px;
        background-color: #0000aa;
		overflow:	auto;
      }
      #main {
		position:	absolute;
		width:		100%;
		top:		100px;        
		bottom:		50px;
        background-color: #00aaaa;
		overflow:	auto;
      }
      #footer {
		position:	absolute;
		width:		100%;
		bottom:		0;
        height:		50px;
        background-color: #aa00aa;
		overflow:	auto;
      }
    </style> 
</head>
<body>
    <div id="header">
      Bla bla.
    </div>
        
	<div id="main">
	  1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
	  1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
	  1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
	  1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
	  1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
	  1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
	</div>
    
	<div id="footer">
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    </div>
 </body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
kerebornAuthor Commented:
Thanks, JohnSixkiller, for replying!

.offsetHeight? WT-? I tried .offsetHeight ... couldn't get it to work? Oh oh ... wait: I tried it in FF. Silly me.
Let's check .offsetHeight in IE .... checking ... BINGO: .offsetHeight seems to work in IE. And  .... checking ... hey, it works in Opera, too? Huh? Strange, Queerer and most Peculiar indeed (to quote John Hurt.)
But not in Chrome, nor FF. How to make it work in them?

Absolute layout works to set the header op top and the footer down below, true enough ... but take a look at the footer: it shows 3 lines of 10. But I want all 10. Or 8, or any! I will use it in a dynamic CMS and therefor I will not know what the footer contains, and therefor not what height to take.
(Remember: I want to read the heights of the divs, so to make them fit in a sort of absolute way.)

thanks so far!
-Kereborn

Sigh ... Wouldn't it be nice if it would work just like a frame? (That worked already 10 years ago. Not for iframe, though. )
<div id=header>bla</div>
<div id=main style="overflow: auto; height:*;" // that is: * is the rest of the screen not used up by all else //>bla</div>
<div id=footer>bla</div>
0
 
kerebornAuthor Commented:
Oh wait ... so you say: do position: absolute anyway and loose the height of the footer?
Yay! That works ... except ... what if the header is a variable height? How do I know then where to place the top of the main div?
So, still I need to know the TRUE height of a div.

.offsetHeight works for IE en Opera ... but (the question remains) how to do it for FF & Chrome?
0
 
JohnSixkillerCommented:
Note to DIV scriptless layout: If you want any part scrollable, you need to fix it to one attribute at least. Top,bottom or height.
0
 
kerebornAuthor Commented:
Thanks again!

If I use your last code, it doesn't work in either browser anymore ;-( With the doctype added the "wanted" behaviour of IE and Opera change into the failing ones of FF and Chrome. See the screenshot. I'll asume that I DO want doctype added (because I want the script to be 'properly coded'.)

Can it still be done? (See the 'preferred' situation on the right in the screenshot.) Either with javascipt, with CSS or both?

Since your last script without the heights in CSS defined works, there is a workaround: do not define any height in the CSS => in stead "define" the default height with a transparent image of the desired default height with width 1px height X px.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }
      #header {
        background-color: #0000aa;
      }
      #headerspacer {
        height: 100px;
      }
      #main {
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: #00aaaa;
      }
      #footer {
        background-color: #aa00aa;
      }
      #footerspacer {
        height: 50px;
      }
    </style>
    <script type="text/javascript">
      window.onload = reSizeMain;
      window.onresize = reSizeMain;
 
      function getWindowHeight() {
        var windowHeight = 0;
        if (typeof(window.innerHeight) == 'number') {
          windowHeight = window.innerHeight;
        } else {
          if (document.documentElement && document.documentElement.clientHeight) {
            windowHeight = document.documentElement.clientHeight;
          } else {
            if (document.body && document.body.clientHeight) {
              windowHeight = document.body.clientHeight;
            }
          }
        }
        return eval(windowHeight);
      }
 
      function reSizeMain(id) {
        if (document.getElementById("main")) {
          var heightHeader = parseInt(document.getElementById("header").offsetHeight);
          var heightFooter = parseInt(document.getElementById("footer").offsetHeight);
          document.getElementById("main").style.height = eval(getWindowHeight()-(heightHeader+heightFooter))+"px";
        } else {
          alert("Update your Browser, Fred Flintstone!\nEven Captain Caveman adepts to its surroundings!\nHe invented Fire! Foxy of 'im, eh?");
          // ... in other words: don't bother with non-getElementById browsers
        }
      }
    </script>
 
</head>
<body>
    <div id="header">
      <img id="headerspacer">      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
 
    </div>
    <div id="main">
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    </div>
    <div id="footer">
      <img id="footerspacer">      1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
 
    </div>
 </body>
</html>

Open in new window

screenshotOpera.jpg
0
 
kerebornAuthor Commented:
My last code snippet worked in all browser, but failed horribly in FF. If you remove the 1234567890 in the divs you'll see why. With something other than an empty image in the div FF works correct again.
0
 
kerebornAuthor Commented:
Note to DIV scriptless layout: If you want any part scrollable, you need to fix it to one attribute at least. Top,bottom or height.

Fix it? I'm afraid I do not know what you mean? Is the some CSS solution to it that I didn't know about?
0
 
kerebornAuthor Commented:
Hmm. FF will not accept a CSS spacer. If I put the spacer directly in the div, then is does ?!? Oh well ... if it works ... it works.
0
 
kerebornAuthor Commented:
After some puzzling with a workaround solution: this code actually works in FF3+, Opera9+, IE7+ and Chrome!

The answer to my initial question as to the ACTUAL height is alas not solved ... wait a minute, no, that's not right, you did solve it: .offsetHeight is the answer! The complication is a stupid bug: with height in CSS defined, the javascript .offsetHeight does not show the actual height, but the CSS defined one. That is, with the doctype set. Without the doctype set, Opera and IE DO give the actual height, not the CSS defined one.

:-?

Stop fretting yourself, Kereborn ... it's only a logical scripting language --- made by humans ... therefor it is to be expected that is does NOT work logical. Put on your happy face!

:-)

So the workaround script works! Yay! Hats & cigars! Thanks to you JohnSixkiller!

On to the next problem! Getting the actual height of a page in an iframe! In FF it works, but not in IE! And then still only if the server location of the parent page and the iframe page are the same.

-------------------------------------
For anyone interested:
  • IE has a strange bug: once in a while when resizing the window, I get a horizontal scrollbar. It seems to do this at random. (Maximizing the window and minimizing works fine, but dragging to resize gives the bug now and then.)
  • If you use "position: relative; bottom -25px;" on the last footer spacer, you will get vertical 'page' scrollbars AND 25px of your total page will not show (unless you scroll the page.) This makes sort of sense. Do this in the header and your div really will be unreachable.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }
      #header {
        position: relative;
        background-color: #0000aa;
      }
      #container {
        position: relative;
        background-color: #000000;
      }
      #main {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 50%;
        overflow: auto;
        background-color: #00aaaa;
      }
      #sidebar {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 50%;
        overflow: auto;
        background-color: #aaaa00;
      }
      #footer {
        position: relative;
        background-color: #aa00aa;
      }
      #spacer {
        height: 50px;
        width: 50px;
        background-color: #aa0000;
      }
    </style>
    <script type="text/javascript">
      window.onload = reSizeMain;
      window.onresize = reSizeMain;
 
      function getWindowHeight() {
        var windowHeight = 0;
        if (typeof(window.innerHeight) == 'number') {
          windowHeight = window.innerHeight;
        } else {
          if (document.documentElement && document.documentElement.clientHeight) {
            windowHeight = document.documentElement.clientHeight;
          } else {
            if (document.body && document.body.clientHeight) {
              windowHeight = document.body.clientHeight;
            }
          }
        }
        return eval(windowHeight);
      }
 
      function reSizeMain(id) {
        if (document.getElementById("container")) {
          var heightHeader = parseInt(document.getElementById("header").offsetHeight);
          var heightFooter = parseInt(document.getElementById("footer").offsetHeight);
          document.getElementById("main").style.height = eval(getWindowHeight()-(heightHeader+heightFooter))+"px";
          document.getElementById("sidebar").style.height = eval(getWindowHeight()-(heightHeader+heightFooter))+"px";
          document.getElementById("container").style.height = eval(getWindowHeight()-(heightHeader+heightFooter))+"px";
        } else {
          alert("Update your Browser, Fred Flintstone!\nEven Captain Caveman adepts to its surroundings!\nHe invented Fire! Foxy of 'im, eh?");
          // ... in other words: don't bother with non-getElementById browsers
        }
      }
    </script>
 
</head>
<body>
    <div id="header">
      <div id="spacer"></div><div id="spacer" style="position: relative; bottom: 25px; right: -25px;"></div><div id="spacer" style="position: relative; bottom: -25px; right: -25px;"></div>
    </div>
    <div id="container">
      <div id="main">
        1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
        1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      </div>
      <div id="sidebar">
        1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
      </div>
    </div>
    <div id="footer">
      <div id="spacer"></div>Where does this
      <div id="spacer" style="position: relative; top: 0px; left: 25px;"></div><span style="position: absolute; bottom: 0px; right: 0px;">To here?</span>
      <div id="spacer"></div>text go?
      <div id="spacer" style="position: relative; bottom: 0px; right: -25px;"></div>
    </div>
</body>
</html>

Open in new window

0
 
kerebornAuthor Commented:
Thumbs up! You helped me get a working solution to the problem!
0
 
kerebornAuthor Commented:
-------------------------------------
For anyone interested:
  • IE will respond differently to "position: relative; bottom: -25px;" than the others.
  • Even if you remove the relative divs in the footer, IE will still behave badly: when resizing the divs will "wobble" around their postions. The other three browser respond as intended. Chrome works  even  flawlessly with its refresh rate.

0
 
kerebornAuthor Commented:
On to the next problem! Getting the actual height of a page in an iframe! In FF it works, but not in IE! And then still only if the server location of the parent page and the iframe page are the same.
___________________

How's that? "It" works in FF but not in IE?

I had a script which set the height of the iframe to the desired "rest"-height of the screen. I tried to do it from within the parent frame. And that worked, but not in IE.

So, why not change the height from without, i.e. from within the child?
___________________

And the solution is just that --- the child is the key. Use my last script and add:

      #iframe {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        border: 0px;
      }

Insert this iframe in the "sidebar" div:

<iframe id="iframe" src="imagegallery.html"></iframe>

And use the image and imagegallery.html here in the snippet.
This only works if the file within the iframe and the parent file are on the same domain. Google on 'cross domain scripting' for more info.


<html>
  <head>
    <script>
      // code adapted from examples on http://www.quirksmode.org/
      var y;
      var test1 = document.body.scrollHeight;
      var test2 = document.body.offsetHeight
      if (test1 > test2) {
          y = document.body.scrollHeight;
      }
      else {
          y = document.body.offsetHeight;
      }
      //set iframe height to our needed space, if present
      var ourFrame = window.parent.document.getElementById('iframe');
      if (ourFrame) {
          ourFrame.style.height = y + "px";
      }
    </script>
  </head>
  <body>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
    <img src="apple.jpg"><br>
  </body>
</html>

Open in new window

apple.jpg
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.