Solved

Web Page Layout not extending 100% of page height

Posted on 2008-10-24
13
735 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
ID: 22797394
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
ID: 22797942
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
ID: 22800298
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
ID: 22800842
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
ID: 22807172
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
ID: 22809564
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 1

Author Comment

by:16spam16
ID: 22809664
dont you need to have that?
0
 
LVL 1

Author Comment

by:16spam16
ID: 22809668
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
ID: 22812003
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
ID: 22812336
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
ID: 22812489
This only seems to be an issue with IE7, firefox is ok
0
 
LVL 1

Author Comment

by:16spam16
ID: 22813445
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
ID: 22814422
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

920 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

15 Experts available now in Live!

Get 1:1 Help Now