height 100% issue on Firefox

**Banfa** · Aug 8 '06, 01:33 PM

You should post a link to the page so we can see the problem.

Start by validating your html at www.w3c.org (look on the right hand side for the HTML validator). to have the page work well cross browser it will need to be in complient HTML so that they can all understand it.

**ilesh** · Aug 8 '06, 09:13 PM

Hello Banfa

To be honest I would just like to know how I could do this using XHTML and CSS?

Because we are thinking of converting the table structure into XHTML.
So really I should have posted the following question:-

We have a top image of width 100%
We have a left hand nav bar and then next to it is the content area
We also have a bottom nav bar which is locked to the bottom of the screen.
So in IE I know this works, but for Firefox, how could I make the content area scrollable in its own div tag? As the content may not be large enough therefore overflow would be set to auto. But if it is large enough then I would like the content area to 100% depending on the browser size. So if I resized the browser it should flow without problems. I say this because I have specified a height for the content area and it looks fine, but what if the browser is not running 800px by 600px? Then it would look wierd.

So really is there a way to make a div area scrollable and make it height 100%?

Sorry for the confusion before

Thanks

**Banfa** · Aug 9 '06, 10:06 AM

From you description you should be able to do what you want using XHTML and CSS, however in a case like this it is true that 1 sample webpage is worth 10000 forum postings :D

There is a problem in setting 100% height because it relates the height of an element to the height of it's container. However if that container is not of fixed height (like say the body of the document that sizes itself to the height of the content) then it will be dependent on the height of it's content so you end up with the contents height dependent on the container who's height is dependent on the content which clearly doesn't work.

I guess you have set the body to 100% and the content div to some other percentage. This works in MSIE but is not part of the CSS standard. The CSS standard does define ways of doing what you want but unfortunately MSIE is not standard complient enough to support them.

However mixing methods gives the following which sort of works in both IE and FireFox

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
 
<html>
<head>
<meta name="generator" content="microsoft visual studio 6.0">
<title></title>
</head>
<body style="height: 100%; margin: 0; padding: 0;">
 
<div style="position: absolute; top: 5%; left: 5%; right: 5%; bottom: 5%; height: 90%; background-color: #ccf; overflow: auto;">
 
<!-- Content Here ->
 
</div>
 
</body>
</html>

**ilesh** · Aug 11 '06, 09:16 PM

Thanks for your help Banfa, I am looking at this, but am currently assigned another project. When I return to this project I will try this out.

Again thanks for your input, I am learning a lot.

Ilesh

**Samus** · Oct 1 '06, 07:34 PM

hello, I'm a newcomer who found this place just for the same issue, very interesting forum I'll try to be around.

About this I have a question, you've said that:

Originally posted by Banfa

There is a problem in setting 100% height because it relates the height of an element to the height of it's container.

which is basically true -but- body is not the outermost element, html is and html always have the width and height of the browser's client area.

An example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style>
      html {
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
  </body>
</html>

So, what's wrong here? why setting the height of the body tag does not renders it based on it's container (which is the html tag).
Thank you.

**Samus** · Oct 1 '06, 09:25 PM

hi! I've found something interesting here: http://apptools.com/examples/tableheight.php it shows a way to do it setting both the height of the html and body tags to 100%, it says that does not work on IE on Mac but here: http://blog.deconcept.com/2005/01/02...l-flash-embed/ is another example that applies the same technique and it supposed to work even there.

**rapsody** · Oct 4 '06, 02:28 PM

I have a similar problem I using xhtml strict in firefox....I have a header <div> then a middle <div> and thjen a footer <div>.

The middle <div> is made up of two <div> left and right (parraell) the data in each is expandable. if the right txt has more txt than the left one the footer <div> starts to display in the right <div>.

I have put the height of each left and right <div> 100% and the middle <div> 100% but it doesn't solve the problem...any ideas

**toxicpaint** · Oct 4 '06, 02:39 PM

Try adding this to your footer css

clear: both;

From what you described, I had the same problem...

**drhowarddrfine** · Oct 4 '06, 03:10 PM

You have to keep asking the question "100% of what?" Even though you set 100% height on the middle div, it is 100% of what? If the body is the next parent element, is it set to 100%? Is the next element, html, set to 100%? The html element is the only element that gets a default size which is the viewport of the browser but you still must specify if you want it to be 100% of that.

Another way around this is to set an actual size to the middle div using ems or px. Then 100% becomes 100% of that.

In any case, Firefox is doing all this correctly.

**vtkiet05** · Oct 18 '07, 08:07 AM

This is complete: Create Master page using DIV tags

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitl ed Document</title>
<style type="text/css">

</style>
</head>

<body style="width:99 .8%; border: 1px solid #ff0000 ">
<div id="leftspace"> </div>
<div id="leftscroll" > </div>
<div id="container" >

<div id="header">Thi s is the header section</div>

<div id="left">
Category 1 <br />
Category 2 <br />
Category 3 <br />
</div>

<div id="middle">
<br />
A frequently asked question in CSS forums is how to create pages that stretch vertically to fill the browser window, regardless of the amount of content. With tables, you would nest your entire design in a table with a single cell and set both the cell and table's height to be 100 percent. With CSS, it's also quite simple and easy. In this tutorial, you will learn the basic CSS technique for making pages fill the browser window, which you can also use any time you have a div that you want to stretch to fill its parent.
<br />

</div>

<div id="right">Colu mn 3 content </div>

<div id="footer"><b r />This is the footer section<br />Mangrove CM, Vietnam </div>
</div>
<div id="rightscroll "> </div>

<div id="rightspace" > </div>
</body>
</html>[/html]

**drhowarddrfine** · Oct 18 '07, 01:54 PM

I guess you didn't notice this topic is over a year old?

height 100% issue on Firefox

height 100% issue on Firefox

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment