Results 1 to 2 of 2
-
12-04-2008, 06:36 AM #1Web Hosting Master
- Join Date
- Jun 2002
- Location
- United Kingdom
- Posts
- 1,238
firefox ignoring max-height: 100%
Hello.
Im currently writting a webpage, which needs to stretch to the width of the page, and the height of the page. At the moment the page layout is something like this:
Code:
|-----------------|
| A1 | |
| | |
--------- B1 |
| | |
| A2 | |
| | |
-------------------
The overral table stretches to the width of the page correctly in all browsers i have tested, using the following CSS:
Code:
.doc-table{
color: #555;
font-family: verdana, arial;
font-size: 12px;
width:100%;
height:100%;
background: #EEEEFF;
}
A1 is fixed width of 300px, and height of 300px. A2 has the same fixed width, but no height (so that it uses the free space). B1 has no width and height, to use all the available space.
Now, in B1 i have div tags... because i want the text in inside of the div, to overflow with scrollbars, and not stretch the table layout beyond 100% of the screen.
The code i am using for the div is:
Code:
.results-div{
position: relative;
height: 100%;
max-height: 100%;
overflow-y: scroll;
overflow-x: scroll;
}
prior to adding max-height .... in both IE and firefox, the table still stretched and the scrollbars never worked.
However, i put the max-height in, and now it works in IE, but in firefox the whole main table still stretches.
I assume its because im using percentages, but i MUST layout the table to ue 100% of the space.
how do i get around this problem.
Thank you.
__________________
TDDRadio - The Best in Rock MusicListen at 192k
-
12-05-2008, 06:10 AM #2Junior Guru Wannabe
- Join Date
- Mar 2008
- Posts
- 30
Have you first set the <body> tag to a height:
Code:
body {
background:#000;
height:100%;
min-height:100%;
}