Solved

Web Page Layout not extending 100% of page height

Posted on 2008-10-24
13
734 Views
Last Modified: 2012-05-05
my web page is made from a table with multiple rows.

I would like the entire table to stretch to 100% of the page height to ensure Footer row is at the bottom of webpage.

I had thought i had it
i added Height="100%" to both the body and html elements...but that increased the size of my header, menu, helpbar rows.

what can be done to solve this.  It seems like it is a easy question.

I had DIV, I wish not to use DIVs.  

Thank you in advance.

I have provided my webpage and relevent CSS items
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>
 

<!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 runat="server">

    <title>Untitled Page</title>

    <link href="css/theme.css" type="text/css" rel="stylesheet"/>

</head>

    

<body>

    <form id="form1" runat="server" >

    <table id="Page" class="page_layout" cellpadding="0" cellspacing="0" align="left">

        <tr id="header">

            <td colspan="2" valign="top">

                <!-- Header Start -->

                

                <!-- Header End -->

            </td>

        </tr>

        <tr id="mainmenu" >

            <td colspan="2" class="page_menu" valign= "middle">

                <!-- Menu Start -->

                

                <!-- Menu End -->                

            </td>

        </tr>

        <tr id="helpbar" class="helpbar" >

            <td id="pagetitle" align="left" valign= "middle" class="plaintextbold">

                <!-- Page Title Start -->

                

                <!-- Page Title End -->            

                </td>

            <td id="helpbtn" align="right" valign= "middle" class="helpbarlink">

                <!-- Help Button Start -->

                

                <!-- help Button End -->            

                </td>

        </tr>

        <tr id="body" class="plaintext">

            <td colspan="2" align="left" valign="top">

                <!-- Script Start -->

                

                <!-- Script End -->            

                <!-- Body Start -->

                              

                <!-- Body End -->

            </td>

        </tr>

        <tr id="footer">

            <td colspan="2" valign="bottom">

                <!-- Footer Start -->

                

                <!-- Footer End -->                

            </td>

        </tr>

    </table>

    </form>

</body>

</html>
 
 
 

body{height:100%; background: url(../image/body_bg.gif);}

.helpbar{padding-left:2px;padding-right:2px;border-bottom-style: solid; border-bottom: 1px;border-bottom-color: #666666; background-color: #F2F2F2;}

.page_layout{background-color:White;width:950px;margin:0;padding:0;height:100%;}

.footer{font-family: Arial;font-size: 10px;font-weight: normal;color: White;text-decoration:none;background-color:#003366;height:18px;width:950px;}

.page_menu{height: 25px;background-color:#D8D9DA; border-top:1px solid #AAAAAA;border-bottom:1px solid #666666;width:100%;}

.plaintext{font-size: 12px; color:Black;font-family: Arial; font-weight: normal;text-decoration: none;width: 337px;height: 10px;}

Open in new window

0
Comment
Question by:16spam16
  • 9
  • 2
  • 2
13 Comments
 
LVL 8

Expert Comment

by:arhame
Comment Utility
You had it right when you set height to 100%, but if you don't want everything to stretch to take up that room then you'll need to set a static height on the rows you don't want to grow (header, menu, etc).

So something like height=50px;
0
 
LVL 1

Author Comment

by:16spam16
Comment Utility
Why wont my page listen to me?
page does height 100%
but doesnt want to listen to my static row heights.
I must have something missing or out of order.

I have provided full page source and rel. CSS items.

thanks in advance.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Main.aspx.vb" Inherits="MySite.Main" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<%@ Register src="crtlHeader.ascx" tagname="crtlHeader" tagprefix="uc2" %>

<%@ Register src="crtlFooter.ascx" tagname="crtlFooter" tagprefix="uc3" %>

<%@ Register src="crtlMenu.ascx" tagname="crtlMenu" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
 

<html>

<head id="HEAD1" runat="server">

<link rel="SHORTCUT ICON" href="image/favicon32.ico"/>

<title> - MySite</title>

<link href="css/theme.css" type="text/css" rel="stylesheet"/>

</head>

<body>

<form id="Form1" method="post" runat="server">

    <table id="Page" cellpadding="0" cellspacing="0" align="left">

        <tr id="header">

            <td colspan="2">

                <!-- Header Start -->

                <uc2:crtlheader ID="crtlHeader1" runat="server" />

                <!-- Header End -->

            </td>

        </tr>

        <tr id="mainmenu" >

            <td colspan="2" class="page_menu" valign= "middle">

                <!-- Menu Start -->

                <uc1:crtlmenu ID="crtlMenu1" runat="server" />

                <!-- Menu End -->                

            </td>

        </tr>

        <tr id="helpbar" class="helpbar">

            <td id="pagetitle" align="left" valign= "middle" class="page_title">

                <!-- Page Title Start -->

                MySite Account Summary

                <!-- Page Title End -->            

                </td>

            <td id="helpbtn" align="right" valign= "middle" class="helpbarlink">

                <!-- Help Button Start -->

                

                <!-- help Button End -->            

                </td>

        </tr>

        <tr id="body" class="plaintext">

            <td colspan="2" align="left" valign="top">

                <!-- Script Start -->

                <asp:scriptmanager ID="ScriptManager1" runat="server"></asp:scriptmanager>

                <!-- Script End -->            

                <!-- Body Start -->

                                 

                <!-- Body End -->

            </td>

        </tr>

        <tr id="footer">

            <td colspan="2" valign="bottom">

                <!-- Footer Start -->

                <uc3:crtlfooter ID="crtlFooter2" runat="server" />

                <!-- Footer End -->                

            </td>

        </tr>

    </table>        

</form>

</body>

</html>
 
 
 
 

body{height:100%; background: url(../image/body_bg.gif);margin:0;padding:0;}

html{height:100%;}
 

#header{height:50px; vertical-align:top;}

#footer{height:25px;}

#mainmenu{height:25px;}

#helpbar{height:25px;}

#Page{width:950px;background-color:White; height:100%;}
 

.helpbar{background-color: #F2F2F2;}

Open in new window

0
 
LVL 8

Accepted Solution

by:
arhame earned 35 total points
Comment Utility
Sorry for the slow response.  On a project of my own atm.  Hmmm... I know the concept works, simple test attached shown below showing the same concepts.  Let me look and see if I can see anything in yours that would be causing it to act weird.


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 

<!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> New Document </title>

<style type="text/css">

html{height:100%;}

body{height: 100%;}
 

#table1{background-color: black; height: 100%; width:950px;}

#td1{height:135px; vertical-align:top;}

#tr2{height: 100%;}

#tr3{height: 25px;}

</style>

</head>
 

<body>

<table id="table1">

	<tr id="td1"><td ></td></tr>

	<tr id="tr2"><td style="background-color: red;"></td></tr>

	<tr id="tr3"><td></td></tr>

</table>
 

</body>

</html>

Open in new window

0
 
LVL 1

Author Comment

by:16spam16
Comment Utility
what you have and what I had, i thought were the same.  I still cant seem to get this working, lol one would think it would be straight forward. no worries on the response delay(it is a friday night).
0
 
LVL 1

Author Comment

by:16spam16
Comment Utility
Update..
So far i think i found 2 culprits for my issue.
1. b/c it is a webapp my BODY tag is inside a FORM tag...which is why the page didnt go 100%, i had to add a

form{height:100%;}
2.  I have my header usercontrol having a BODY tag in it when i really didnt need it, plus it was making my header 100%, so i removed that.

When i get back into the office on monday i will be able to fully test this, BUT so far so good.
0
 
LVL 1

Assisted Solution

by:Bolter99
Bolter99 earned 35 total points
Comment Utility
Try removing this ... See if it makes a diffrence. Its ushually what does this for me.

"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" & all lines from your ASP code to the HTML tag.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 1

Author Comment

by:16spam16
Comment Utility
dont you need to have that?
0
 
LVL 1

Author Comment

by:16spam16
Comment Utility
I will be in the office tomorrow morning, i can tak e a look at my source code tomorrow.
0
 
LVL 1

Author Comment

by:16spam16
Comment Utility
by removing:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">

It made it look right.
For some reason that line was making height like 110%? something like that.  I am going to run a few more tests though.
0
 
LVL 1

Author Comment

by:16spam16
Comment Utility
Well, here is an update.
by removing
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">

it solved my layout issue....BUT with more testing it seems as though that line effects my "modal" update panel.
Basically, the page still shows the update panel, but with no formating.   AHHH nothing is ever simple.

.modalBackground {background-color: Gray;filter:alpha(opacity=70);opacity:0.7;}

.modalPopup {background-color: White;border-width:1px;border-style: solid;border-color:#333333;padding:1px;text-align:center;}

Open in new window

0
 
LVL 1

Author Comment

by:16spam16
Comment Utility
This only seems to be an issue with IE7, firefox is ok
0
 
LVL 1

Author Comment

by:16spam16
Comment Utility
This is what I am going to have to do....
 I am going to use this markup

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
which allows me to use height 100%

BUT

I am going to have to eliminate my modal popup feature(which isnt a big deal) it would have been nice to keep it, but I can live without it. Unless i find a good solution for that, but thus far i have found nothing.
0
 
LVL 1

Expert Comment

by:Bolter99
Comment Utility
You dont need it ...but its concidered proper syntax for HTML. :S

I noticed this a while back. Its almost as if its producing a line break ...not fully commented out. Probabbly a bug in IE.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Read about why website design really matters in today's demanding market.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now