Click here to Skip to main content
11,645,499 members (80,798 online)
Click here to Skip to main content

Solve the height=100% problem in Firefox

, 17 Oct 2007 CPOL 48.7K 134 11
Rate this:
Please Sign up or sign in to vote.
Disign master pages using DIV tags.

Introduction

I had problems using DIV tags to design my page layout. When designing, I wanted a column height as 100%. I wrote:

<div style="height:100%"></div>

It worked fine in IE but failed in Firefox. I researched so much in the forums and finally, I did the design successfully. Now I am publishing it hoping it will help you!

Background

You should be familiar with CSS. please visit: http://www.w3c.org, http://www.w3schools.com.

Using the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body, p, td, li, div, html
{ 
font-family: arial, verdana, helvetica, monospace; 
color: #000080;
font-size: small;
height:100%;
width:99%;
}
#leftspace {
float:left;
text-align: center;
width: 10%;
height:100%;
background-color:#006699;
background-repeat:repeat-y;
}

#container
{
float:left;
text-align: center;
width:78.56%;
}

#rightspace {
float:left;
text-align: center;
width: 10%;
background-color:#006699;
background-repeat:repeat-y;
height:100%;
}

#leftscroll {
float:left;
text-align: center;
width: 7px;
height:100%;
/*background-image:url(images/home_bg05.gif);*/
background-color:#ff0000;
background-repeat:repeat-y;
}
#rightscroll {
float:left;
text-align: center;
width: 7px;
height:100%;
/*background-image:url(images/home_bg04.gif);*/
background-color:#ff0000;
background-repeat:repeat-y;
}

#header {
float: left; 
border: 1px solid #8690ab; 
text-align: center; 
height: 100px; 
width: 99.8%; 

}
#left {
float:left; 
width: 20%; 
height: auto; 
border: 1px solid #8690ab; 
}

#middle {
float:left; 
width: 59.49%; 
border: 0px solid #8690ab; 
height:auto;
}

#right {
float:left; 
width: 20%; 
height: auto; 
border: 1px solid #8690ab;
}

#footer{
float: left; 
border: 1px solid #8690ab; 
text-align: center; 
height: 60px; 
width: 99.8%; 
}

-->
</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">This 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 quite simple and easy. In this tutorial, you will learn the basic CSS techniques 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">Column 3 content </div>
<div id="footer"><br />This is the footer section<br />Mangrove CM, Vietnam </div>
</div>
<div id="rightscroll"> </div>
<div id="rightspace"> </div>
</body>
</html>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

mangrovecm
Web Developer
Vietnam Vietnam
I am from VietNam

You may also be interested in...

Comments and Discussions

 
GeneralA similar article Pin
DailyCoding12-Jun-08 0:25
memberDailyCoding12-Jun-08 0:25 
GeneralSome explanations would help Pin
Laurent Cozic8-Mar-08 10:32
memberLaurent Cozic8-Mar-08 10:32 
QuestionOn what ver of IE or FF did you try it? Pin
skiner26-Oct-07 14:48
memberskiner26-Oct-07 14:48 
AnswerRe: On what ver of IE or FF did you try it? Pin
mangrovecm26-Oct-07 16:53
membermangrovecm26-Oct-07 16:53 
GeneralFooter at bottom Pin
Jon-Hawkins18-Oct-07 0:20
memberJon-Hawkins18-Oct-07 0:20 
GeneralRe: Footer at bottom Pin
kiet vu18-Oct-07 16:21
memberkiet vu18-Oct-07 16:21 
GeneralRe: Footer at bottom Pin
Jon-Hawkins18-Oct-07 21:17
memberJon-Hawkins18-Oct-07 21:17 
GeneralRe: Footer at bottom Pin
mangrovecm22-Oct-07 23:01
membermangrovecm22-Oct-07 23:01 
GeneralRe: Footer at bottom Pin
mangrovecm23-Oct-07 18:34
membermangrovecm23-Oct-07 18:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150731.1 | Last Updated 18 Oct 2007
Article Copyright 2007 by mangrovecm
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid