4 replies [Last post]
faheem
Offline
newbie
Last seen: 10 years 49 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

Hello experts,

I'm having a little problem with my basic layout.

I want to 100% height of the browser window.

I divide my table into 4 sections

Header = 80px height
Sections = 25px height
Body = (the remaining height of the page)
Footer = 80px height

The problem I'm having is the page does not appear as I'm expected to have the remaining height for the body section. Can you please help by letting me know what mistake I made

Thanks a lot
Faheem
Hong Kong

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Administrator</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">

html {
	height:100%; 
	max-height:100%;
	padding:0;
	margin:0; 
	border:0; 
	overflow:auto; 
	text-align:center
}

body {
   background-color: #ffffff;
	height:100%; 
	max-height:100%; 
	overflow:auto; 
	padding:0;
	margin:0; 
	border:0;
}

table#outerTable1 {
   padding: 0px;
   border-collapse: collapse;
   width: 900px;
	border: 0px;
   height: 100%;
   max-height: 100%;
}

table#outerTable2 {
   padding: 0px;
   border: 1px solid red;
   width: 100%;
   height: 100%;
   max-height: 100%;
	
}

td.outerTable {
   height: 100%;
   max-height: 100%;
   vertical-align:top;
   border: 1px solid red;
}

td.brandingPanel {
   height:80px;
   vertical-align:top;
   border: 1px solid red;
}

td.roomPanel {
   height:25px;
   vertical-align:top;
   border: 1px solid red;
}

td.bodyPanel {
   vertical-align:top;
   border: 1px solid red;
}

td.footerPanel {
   height:80px;
   vertical-align:bottom;
   border: 1px solid red;
}
</style>
</head>

<body>
  
   <table id="outerTable1" cellpadding="0" cellspacing="0">
      <tr>
         <td valign="top" class="outerTable">

            <table id="outerTable2" cellpadding="0" cellspacing="0">
               <tr>
                  <td class="brandingPanel">Top
                  </td>
               </tr>

               <tr>
                  <td class="roomPanel">Sections
                  </td>
               </tr>


               <tr>
                  <td class="bodyPanel">Body
                  </td>
               </tr>


               <tr>
                  <td class="footerPanel">Footer
                  </td>
               </tr>
            </table>
            
         </td>
      </tr>
   
   </table>

</body>
</html>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

100% page height

Faheem,

Welcome to CSSCreator Forums. This site is about the use of CSS for layout and keeping tables for tabular data. Your snippet looks very much like a table based layout, so it extremely unlikely you'll get any help here using that html structure.

So saying, your layout looks to be single column. As such there is no reason to use a table anyway. Its easy enough to construct that layout using generic container elements and CSS styling.

CSS-
html, body { margin: 0; padding: 0; height: 100%;}
#wrap {min-height: 100%; margin-bottom: -80px;}
/* for IE not Mac \*/
* html #wrap {height: 100%;}
/* end for IE */

#header { height: 78px; padding: 1px 0;}
#section { height: 25px;}
#footer {height: 78px; padding: 1px 0;}

html -

<body>
<div id="wrap"> ... </div>
  <div id="header"> ... </div>
  <div id="section"> ... </div>
  <div id="content"> ... </div>
</div>
<div id="footer"> ... </div>
</body>

Above code isn't tested. You may want to read up on footerstickalt at theManInBlue

faheem
Offline
newbie
Last seen: 10 years 49 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

100% page height

wow.. very interesting. Something I'm going to start learning since this example.

Your code worked well as expected.

Million Thanks

faheem
Offline
newbie
Last seen: 10 years 49 weeks ago
Joined: 2006-02-22
Posts: 9
Points: 0

100% page height

Where can I find a simple & ultimate tutorial to completely convert my html pages to css based as what you guys talking here?

Thanks a lot

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

100% page height

I am not sure there is a "simple and ultimate" tutorial for converting layouts. There are lots of pages around to assist in different aspects of creating CSS based layouts:

You'll find lots of links to those pages at http://css-discuss.incutio.com/?page=CssLayouts

Also take a look around the rest of that site, there is great information and links to just about every aspect of CSS.