Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2009-02-24
14
Medium Priority
?
645 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:kereborn
  • 10
  • 4
14 Comments
 
LVL 11

Expert Comment

by:JohnSixkiller
ID: 23721629
Hi, use DIV.offsetHeight
0
 
LVL 11

Expert Comment

by:JohnSixkiller
ID: 23721730
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
 

Author Comment

by:kereborn
ID: 23724053
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:kereborn
ID: 23724115
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
 
LVL 11

Accepted Solution

by:
JohnSixkiller earned 1000 total points
ID: 23731168
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
 
LVL 11

Expert Comment

by:JohnSixkiller
ID: 23731684
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
 

Author Comment

by:kereborn
ID: 23731726
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
 

Author Comment

by:kereborn
ID: 23731749
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
 

Author Comment

by:kereborn
ID: 23731761
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
 

Author Comment

by:kereborn
ID: 23731898
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
 

Author Comment

by:kereborn
ID: 23732443
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
 

Author Closing Comment

by:kereborn
ID: 31550523
Thumbs up! You helped me get a working solution to the problem!
0
 

Author Comment

by:kereborn
ID: 23732721
-------------------------------------
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
 

Author Comment

by:kereborn
ID: 23732884
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question