By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,086 Members | 1,442 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,086 IT Pros & Developers. It's quick & easy.

Height at 100% Not Working

P: n/a
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;
}
Nov 21 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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)

"Mike Collins" <Mi*********@discussions.microsoft.comwrote in message
news:D3**********************************@microsof t.com...
>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;
}

Nov 21 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.