Height at 100% Not Working

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I am trying to create some pages and have them take 100% of the window, but I
cannot get 100% to work. If I set the height of my div, the page displays a
scroll bar and it looks like I set the height to about 150%. I tried using
CSS, now I am trying tables. Can someone show me where I am mixing things up?
Thanks.

--Master Sheet
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="master.master.cs"
Inherits="pts" %>

<!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>Project Tracking System</title>
<script language="JavaScript" src="scripts/menu.js"
type="text/javascript"></script>
<script language="JavaScript" src="scripts/popup.js"
type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="pts.css">
</head>
<body>
<form id="frmMaster" runat="server">
<div id="main">
<div id="header"><a href="default.aspx" style=" font-size:x-large;
font-weight: bold; color: White;">Time Management System</a></div>
<div id="banner">
<a class="bannerlink" href="about:blank">Access Timecard</a>
<a class="bannerlink" href="about:blank">Enter New Employees</a>
<a class="bannerlink" href="SelectProject.aspx">Edit Time Data</a>
<a class="bannerlink" href="#" onclick="LoadContextMenu();">Reports</a>
</div>
<div id="divContainer" style="height: 100%;">
<asp:contentplaceholder id="cphMaster" runat="server">
</asp:contentplaceholder>
</div>
<div id="footer"></div>
</div>
</form>
</body>
</html>

--Main Page
<%@ Page Language="C#" MasterPageFile="~/master.master"
AutoEventWireup="true" CodeFile="ProjectOverviewTest.aspx.cs"
Inherits="ProjectOverview" Title="Time Management System" %>
<asp:Content ID="cntProjectOverview" ContentPlaceHolderID="cphMaster"
Runat="Server">
<div id=divProjectData style="text-align:center">
<div id="divTabsContainer" style="z-index:999; margin-top: 20px;
margin-bottom: -1px; text-align:left; width:95%; left: -1px;">
<asp:linkbutton id="lbOverview" runat="server" CssClass="activelink"
Height="20px" CausesValidation="False">Overview</asp:linkbutton>
<asp:linkbutton id="lbFinancial" runat="server" CssClass="inactivelink"
Height="20px" CausesValidation="False"
onclick="lbFinancial_Click">Financial</asp:linkbutton>
<asp:linkbutton id="lbSchedule" runat="server" CssClass="inactivelink"
Height="20px" CausesValidation="False"
onclick="lbSchedule_Click">Schedule</asp:linkbutton>
<asp:linkbutton id="lbContacts" runat="server" CssClass="inactivelink"
Height="20px" CausesValidation="False"
onclick="lbContacts_Click">Contacts</asp:linkbutton>
<asp:linkbutton id="lbPTO" runat="server" CssClass="inactivelink"
Height="20px" CausesValidation="False" onclick="lbPTO_Click">PRO
Earned</asp:linkbutton>
<asp:linkbutton id="lbEventSummary" runat="server"
CssClass="inactivelink" Height="20px" CausesValidation="False"
onclick="lbSummary_Click">Summary</asp:linkbutton>
</div>
<table id="content" style="BORDER: darkblue 1px solid; text-align:left;"
height="80%">
<tr>
<td>

</td>
</tr>
</table>
</div>
</asp:Content>

--CSS Page
body
{
font-family: Arial;
font-size: 9pt;
color: Navy;
margin: 0px;
padding: 0px;
}

div
{
position: relative;
}

#smallHeader
{
background: #c0c0c0 url(images/icons/background_main.jpg) repeat-x left top;
width: 100%;
height: 25px;
font-size:medium;
font-weight: bold;
color: White;
text-indent: 2px;
padding-top: 2px;
}

#header
{
background: #c0c0c0 url(images/icons/background_main.jpg) repeat-x left top;
width: 100%;
height: 50px;
font-size:x-large;
font-weight: bold;
color: White;
text-indent: 5px;
padding-top: 1%;
}

#banner
{
background-color: #666666;
border-bottom: solid 1px #222222;
border-top: solid 1px #222222;
height: 25px;
line-height: 23px;
font-size: 8pt;
font-weight: bold;
color: White;
}

a
{
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
font-size: 9pt;
z-index: 1;
height: 20px;
}

a.activelink
{
border:solid 1px blue;
border-bottom: solid 1px white;
cursor:default;
}

a.inactivelink
{
border:solid 1px blue;
background: silver;
}

a.inactivelink:hover
{
text-decoration: underline;
background: white;
}

#imgAdd
{
cursor: hand;
border-style: none;
margin-top: 1%;
}

..bannerlink
{
font-size: 9pt;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
color: white;
}

..bannerlink:hover
{
background-color: gray;
color: White;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 19px;
padding-right: 19px;
border: solid 1px #222222;
}

#content
{
height: 726px;
width: 95%;
}

#footer
{
background-color: #666666;
height: 25px;
line-height: 23px;
text-align: center;
font-size: 8pt;
font-weight: bold;
color: White;
text-indent: 50px;
}

#iframe
{
margin: 2%;
width: 95%;
background-color: White;
font-weight: normal;
color: Navy;
vertical-align: top;
height: 98%;
}

span.boldLabel
{
font-weight: bold;
color: Navy;
text-align:right;
}

label
{
color: Navy;
}

input
{
font-family: Arial;
font-size: 9pt;
color:Black;
}

select
{
font-family: Arial;
font-size: 9pt;
color: Navy;
}

option
{
font-family: Arial;
font-size: 9pt;
color: Navy;
}
 
you are doing nothing wrong. xhtml does not support this.

the body does not have a default height, so a 100% height in the div has no
effect, its still the size of its content. for the 100% to work, the div
must be contained in an object with an absolute height. you need to use
javascript which calc's the screen size and sets the height of the div. use
the body onresize event to do this.

-- bruce (sqlwork.com)
 
Back
Top