3 replies [Last post]
arzo2000
arzo2000's picture
Offline
Regular
Last seen: 7 years 46 weeks ago
Timezone: GMT-4
Joined: 2005-07-07
Posts: 12
Points: 0

I am having trouble making this page stretch to a height of 100%. In an HTML page, the result is a page with a vertical scrollbar.

Can anyone help? Thanks in adavnce guys.

HTML CODE

        <!-- PAGE TABLE -->
        <DIV class="PAGE_TABLE">
            <!-- START OF HEADER -->
            <DIV CLASS="PAGE_TITLE">
                <!-- JUMP NAV -->HEADER
                <!-- END OF JUMP NAV -->
            </DIV>
            <!-- END OF HEADER -->
            <!-- ------------- -->
            <!-- START OF DATE -->
            <DIV ALIGN="RIGHT" CLASS="BG_BLUE_DATE">Wednesday, 31 September, 2005</DIV>
            <!-- END OF DATE -->
            <!-- --------------------- -->
            <!-- START OF PAGE CONTENT -->
			<DIV>
				<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" class="CONTENT_TABLE">
				  <TR>
					<TD VALIGN="TOP" CLASS="NAV_COLUMN_SEP"></TD>
					<TD VALIGN="TOP" CLASS="NAV_COLUMN">
						<!-- NAV COLUMN -->NAVIGATION
					<!-- END OF NAV COLUMN --></TD>
					<TD VALIGN="TOP" CLASS="NAV_COLUMN_SEP"></TD>
					<TD VALIGN="TOP">
					<!-- MAIN PANEL TITLE / CONTAINER -->CONTENT
					<!-- END OF MAIN PANEL TITLE / CONTAINER --></TD>
				  </TR>
				</TABLE>
			</DIV>
            <!-- END OF PAGE CONTENT -->
            <!-- ------------------- -->
            <!-- START OF FOOTER -->
            <DIV id="PAGE_FOOTER" class="FOOTER_TEXT">FOOTER</DIV>
            <!-- END OF FOOTER -->
        </DIV>
        <!-- END OF PAGE TABLE -->

CSS CODE

BODY {
	margin: 0px;
	background-color: #F2F2F2;
	height: 100%;
}

.PAGE_TABLE {
	width: 100%;
	border: 0px;
	background-color: #7799ED;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	height: 100%;
}

.PAGE_TITLE {
	background: #FFFFFF url(images\BLUE_Title_Juno.jpg) no-repeat;
	background-position: left;
	border-bottom: 1px solid #595959;
	height: 63px;
	width: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;	
}

.CONTENT_TABLE {
	width: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	background-color: #FFFFFF;
	height: 100%;
}

.BG_BLUE_DATE {
	background: #7799ED url(images\BLUE_bg_TopDate.jpg) no-repeat;
	background-position: right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	width: 100%;
	height: 17px;
}

.NAV_COLUMN {
	background-color: #7799ED;
	width: 155px;
	height: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
}

.NAV_COLUMN_SEP {
	background-color: #7799ED;
	width: 8px;
}

.FOOTER_TEXT {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	background-color: #7799ED;
	padding-right: 8px;
	height: 13px;
	width: 100%;
}

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 14 weeks ago
A hilly place, UK
Timezone: GMT+1
Joined: 2004-02-05
Posts: 2902
Points: 0

DIV wont fit 100% height

Hi

Full height pages are VERY difficult to make across browsers.

In standards mode, IE MAC can't sensibly do it!

Others have two basic problems:

IE treats height:100% as meaning min-height:100%, meaning it will fit the window at least, and scroll down if necessary.

Gecko engined browsers treat height:100% as fix to the window height, and do not allow scrolling down. It needs min--height instead.

BUT, with min-height in these browsers (such as FF), they will not inherit that height inwards to children of the element with min-height 100% defined. Safari seems to be a bit different, a mix of the two.

Paul O'Brien has done quite a bit of work on this:

www.pmob.co.uk (check some of the experimental ones too towards the bottom).

Trevor

hollywood
Offline
Regular
Last seen: 7 years 35 weeks ago
Joined: 2005-10-29
Posts: 12
Points: 0

DIV wont fit 100% height

as i know display:table for FF or opera and height:100% for IE?

did u use it?

arzo2000
arzo2000's picture
Offline
Regular
Last seen: 7 years 46 weeks ago
Timezone: GMT-4
Joined: 2005-07-07
Posts: 12
Points: 0

DIV wont fit 100% height

hollywood wrote:
as i know display:table for FF or opera and height:100% for IE?

did u use it?

Well I used HEIGHT: 100% for all the DIV tags that I want to expand height wise as the IE window expands.