Height problem

JontyMC · Feb 20, 2005

Why doesn't this give me a box that stretches the height of the screen in firefox?

Code:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html>
  <head>
    <title>test</title>
    <style type="text/css">
#container {
  width: 500px;
  height: 100%;
  background-color: blue;
}
    </style>
  </head>
  <body>
    <div id="container">some content</div>
  </body>
</html>

Vragabond · Feb 20, 2005

W3 said:
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value is interpreted like 'auto'.

More here

CliveC · Feb 20, 2005

If your purpose is to vertically align something in the middle of the screen try:

<html><body>
<div align="center">
<table height="100%" width="500px" valign="middle">
<tr><th>content</th></tr>
</div></table></body></html>

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

JontyMC · Feb 21, 2005

Thanks for the replies. I'm trying to make the content of my page stretch the height of the browser window, even when there is no content in it. Also, when there is more content than can fit on the page, I want it to be stretch to however high that is.

Vragabond · Feb 21, 2005

Actually, there is a weird way of achieving that. Check oppcos' code in this thread:

http://www.tek-tips.com/viewthread.cfm?qid=1004829

I have not tested it and have not checked why exactly it works, but it looks ok. Clive's answer however, will not work in a standards environment -- if you have a complete and valid doctype at the top of your document.

oppcos · Feb 21, 2005

The problem is that the effect is achieved in a different way for IE < 5, IE > 5, and Gecko based browsers (and Opera). To get the right effect, you need to use style sheets that target each browser a little different.

The two bits that took me the longest to research were the attributes associated with html:

Code:

html {
     height: 100%;
     padding: 0;
     margin: 0;
     }

and the negative margin that (I find a negative margin strange) of the main conatainer:

Code:

#maincontainer {
           z-index: 1;
           height: 100%;
           min-height: 100%;
           top: 0;
           left: 0;
           margin: 0px 4% -100px 4%;
           padding: 0;
           background: blue;
           }

The negative margin allows us to place a footer at the bottom but still have a height of 100%!! Anyway, if you have any other specific questions about the design, let me know.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Height problem

JontyMC

Programmer

Vragabond

Programmer

CliveC

Programmer

JontyMC

Programmer

Vragabond

Programmer

oppcos

Programmer

Similar threads

Part and Inventory Search

Sponsor