I need configure one application that include: Image Header (116px height fixed), Image footer (95px height fixed) and the body (controls telerik).
How to set this body for the total height (header + body + footer) be 100% of the browser window.
If I configure the body height to 100%, this don't disscount the header and the footer height.
I attach an image.
Thank's for your assistance.
3 Answers, 1 is accepted
If you want some regular HTML element or RadControl to occupy whole empty space you have to set its height in percentage, but keep in mind that it is nested inside a container, so the Control will calculate its dimensions in regards with this container pixel height. So if you want the control to have 100% height, you have to set same dimension of all its parents elements, usually they are <form>, <body>, <html>, etc.
Also keep in mind that if there is one element that occupy full height of document and you add other elements, all together will overflow the body. So you have to add to its style properties negative margin-top and margin-bottom.
Please take a look at project in the attached file. I hope this helps.
Kind regards,
Galin
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
Rank 2
hello, thank you!
your code works perfectly, however by implementing telerik controls inside the div "# Content", the controls do not inherit the height to 100%.
I'm testing another code. I think I did but I the same problem arises.
I appreciate your help again.
<%@ Page Language="VB" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Test Height</title>
<style type="text/css">
body,html
{
margin:0px;
padding:0px;
height:100%;
background-color:#000000;
}
#encabezado
{
padding:0px;
margin:0px;
width:100%;
height:111px;
position:relative;
background-color:#0F4486;
}
#Container
{
width:100%;
position:absolute; /* to place it somewhere on the screen */
top:111px;
bottom:64px;
background-color:#0066CC;
}
#Content
{
width:100%;
position:absolute;
min-height:100%; /* !importantbrowser fill */
height:auto;
background-color:#CC0000;
}
#piepag
{
vertical-align:bottom;
border-top:solid 7px #0C3465;
background-color:#0F4486;
width:100%;
height:57px;
bottom:0px;
position:absolute;
}
.manoclick
{
cursor:hand;
}
.txt11666
{
font-size:11px;
color:#666666;
}
.txt11333N
{
font-size:11px;
color:#333333;
font-weight:bold;
}
.txt11333
{
font-size:11px;
color:#333333;
}
.txt11FFF
{
font-size:11px;
color:#FFFFFF;
}
</style>
<script language="javascript" type="text/javascript">
function OpenCpe() {
$find("cpeForBehavior")._doOpen();
}
function CloseCpe() {
$find("cpeForBehavior")._doClose();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div id="encabezado"></div>
<div id="Container">
<div id="Content">
<cc1:CollapsiblePanelExtender ID="cpe1" runat="Server"
TargetControlID="pnlcontentvermas"
Collapsed="True"
BehaviorID="cpeForBehavior"
ExpandControlID="tablavermas1"
CollapseControlID="tablavermas1"
AutoCollapse="False"
AutoExpand="False"
ScrollContents="false"
ImageControlID="icovermas1"
ExpandDirection="Vertical" />
<asp:Table ID="tablavermas1" CssClass="manoclick" runat="server" CellPadding="15" CellSpacing="0" Width="100%" BackColor="#FFFFFF">
<asp:TableRow ID="TableRow4" runat="server" VerticalAlign="Middle">
<asp:TableCell ID="TableCell1" runat="server" HorizontalAlign="Left">
<asp:Label ID="Label3" runat="server" CssClass="txt11666" Text="Expandir menú"></asp:Label>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<asp:Panel ID="pnlcontentvermas" runat="server">
<asp:Table ID="Table2" runat="server" BackColor="#EEEEEE" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1" CellPadding="15" CellSpacing="0" Width="100%">
<asp:TableRow ID="TableRow11" runat="server" VerticalAlign="Middle">
<asp:TableCell runat="server" HorizontalAlign="Left">
<asp:Label ID="lbltest" runat="server" CssClass="txt11333" Text="Hola Mundo"></asp:Label>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<div onclick="CloseCpe();" class="manoclick" style="width:100%;">
<asp:Table ID="Table3" runat="server" CellPadding="3" CellSpacing="0" Width="100%" BackColor="#666666">
<asp:TableRow ID="TableRow1" runat="server" VerticalAlign="Middle">
<asp:TableCell runat="server" HorizontalAlign="Right">
<asp:Label ID="Label4" runat="server" CssClass="txt11FFF" Text="- minimizar panel"></asp:Label>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</asp:Panel>
<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" Height="100%">
<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Skin="Windows7">
<telerik:RadPane ID="LeftPane" runat="server" Scrolling="none" MinWidth="200" MaxWidth="500" BackColor="#FFFFFF">
<telerik:RadPanelBar
runat="server" ID="RadPanelBar1"
Height="100%"
ExpandMode="FullExpandedItem">
<Items>
<telerik:RadPanelItem Text="Mail" Expanded="True">
<Items>
<telerik:RadPanelItem Text="Personal Folders" />
<telerik:RadPanelItem Text="Deleted Items" />
<telerik:RadPanelItem Text="Inbox" />
<telerik:RadPanelItem Text="My Mail" />
<telerik:RadPanelItem Text="Sent Items" />
<telerik:RadPanelItem Text="Outbox" />
<telerik:RadPanelItem Text="Search Folders" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Calendar">
<Items>
<telerik:RadPanelItem>
<ItemTemplate>
<telerik:RadCalendar runat="server" ID="Calendar1" Style="margin: 6px auto 0" />
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Contacts">
<Items>
<telerik:RadPanelItem Text="My Contacts" />
<telerik:RadPanelItem Text="Address Cards" />
<telerik:RadPanelItem Text="Phone List" />
<telerik:RadPanelItem Text="Shared Contacts" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Tasks">
<Items>
<telerik:RadPanelItem Text="My Tasks" />
<telerik:RadPanelItem Text="Shared Tasks" />
<telerik:RadPanelItem Text="Active Tasks" />
<telerik:RadPanelItem Text="Completed Tasks" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Notes">
<Items>
<telerik:RadPanelItem Text="My Notes" />
<telerik:RadPanelItem Text="Notes List" />
<telerik:RadPanelItem Text="Shared Notes" />
<telerik:RadPanelItem Text="Archive" />
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem Text="Folders List">
<Items>
<telerik:RadPanelItem Text="My Client.Net" />
<telerik:RadPanelItem Text="My Profile" />
<telerik:RadPanelItem Text="My Support Tickets" />
<telerik:RadPanelItem Text="My Licenses" />
</Items>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
</telerik:RadPane>
<telerik:RadSplitBar ID="Radsplitbar1" CollapseMode="None" EnableResize="true" runat="server"></telerik:RadSplitBar>
<telerik:RadPane ID="MiddlePane1" runat="server" Scrolling="None" Width="100%" BackColor="#FFFFFF">
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadAjaxPanel>
</div>
</div>
<div id="piepag"></div>
</form>
</body>
</html>
The sent layout is different from the sample in my previous post. It seems this is the main reason the same problem appeared. Also I cannot understand why you set position: absolute to the elements. Note that if you set either top and bottom attributes at one element, one of the properties will be ignore.
However in this scenario you have to calculate the height of some elements with javascript. Please take a look at attached project.
Kind regards,
Galin
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!