Hi, I was able to set sticky header and footer with Pagelayout In Master page. However, the child page do not in between the header and footer.
The child page in the content place holder display in the whole browser with the header and footer appear front of it. Anywhere I could get the child page appear between the sticky header and footer, and the child page will scroll when overflow. Thanks
I'm using Visual studio 2010 with .net framework 4.0.
OS:Windows 7
Browser: IE 10
Telerik version:2015.1.225.40
Preferred programming language: VB.NET
Below are my code for Master page and child page
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Responsive.master.vb" Inherits="GMAT.Responsive" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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
></
title
>
<
meta
http-equiv
=
"Page-Enter"
content
=
"blendTrans(Duration=.5)"
/>
<
meta
http-equiv
=
"Page-Exit"
content
=
"blendTrans(Duration=.5)"
/>
<
meta
name
=
"viewport"
content
=
"initial-scale=1.0, minimum-scale=1, maximum-scale=1.0, user-scalable=no"
/>
<
link
href
=
"~/Styles/Site.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"~/Styles/jquery-ui/css/cupertino/jquery-ui-1.10.3.custom.min.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"scripts/jquery-1.10.1.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"scripts/jquery-ui/jquery-ui-1.10.3.custom.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"scripts/jquery.sessionTimeout.js"
type
=
"text/javascript"
></
script
>
<
asp:ContentPlaceHolder
ID
=
"head"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
<
style
type
=
"text/css"
>
.header1 {
background-color: black;
position:fixed;
width:100%;
top:0;
z-index:1000;
}
.header2 {
background-color: #E8EAEC;
}
.header3 {
background: linear-gradient(#FDFEFE, #F0F2F4) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.content {
}
.article2 {
background-color: #EEF1F3;
}
.footer {
background-color: black;
}
html,
body,
form {
margin: 0;
padding: 0;
height: 100%;
}
.container {
min-height: 100%;
position: relative;
}
.allContent {
padding-top:40px;
padding-bottom: 84px; /* Height of the footer */
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 84px; /* Height of the footer */
background: black;
}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ToolkitScriptManager
ID
=
"TSM_CMS_MAIN"
runat
=
"server"
>
</
asp:ToolkitScriptManager
>
<
div
>
<
telerik:RadPageLayout
runat
=
"server"
ID
=
"PageLayoutMaster"
HtmlTag
=
"None"
GridType
=
"Fluid"
>
<
Rows
>
<
telerik:LayoutRow
RowType
=
"Generic"
CssClass
=
"container"
>
<
Rows
>
<
telerik:LayoutRow
RowType
=
"Generic"
CssClass
=
"allContent"
>
<
Rows
>
<
telerik:LayoutRow
RowType
=
"Container"
WrapperCssClass
=
"header1"
WrapperHtmlTag
=
"Div"
>
<
Columns
>
<%--Logo--%>
<
telerik:LayoutColumn
Span
=
"2"
SpanMd
=
"3"
SpanSm
=
"12"
SpanXs
=
"12"
>
<
a
href
=
"#"
class
=
"logo"
>
<
img
src
=
"images/logo1.jpg"
alt
=
"logo"
/>
</
a
>
</
telerik:LayoutColumn
>
<
telerik:LayoutColumn
Span
=
"2"
SpanMd
=
"2"
SpanSm
=
"12"
SpanXs
=
"12"
>
<
div
class
=
"title_main2"
>
<
h1
>
Testing
</
h1
>
</
div
>
</
telerik:LayoutColumn
>
<%--Main Nav--%>
<
telerik:LayoutColumn
Span
=
"8"
SpanMd
=
"7"
SpanSm
=
"12"
SpanXs
=
"12"
>
<
telerik:RadMenu
ID
=
"RadMenu1"
runat
=
"server"
RenderMode
=
"Auto"
EnableRoundedCorners
=
"true"
EnableSelection
=
"true"
EnableShadows
=
"true"
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"Home"
NavigateUrl
=
"Default.aspx"
/>
<
telerik:RadMenuItem
IsSeparator
=
"true"
/>
<
telerik:RadMenuItem
Text
=
"Grid Page"
NavigateUrl
=
"Grid.aspx"
/>
<
telerik:RadMenuItem
IsSeparator
=
"true"
/>
<
telerik:RadMenuItem
Text
=
"ListView Page"
NavigateUrl
=
"ListView.aspx"
/>
<
telerik:RadMenuItem
IsSeparator
=
"true"
/>
<
telerik:RadMenuItem
Text
=
"testing"
NavigateUrl
=
"testing.aspx"
/>
<
telerik:RadMenuItem
IsSeparator
=
"true"
/>
<
telerik:RadMenuItem
Text
=
"Projects"
/>
</
Items
>
</
telerik:RadMenu
>
</
telerik:LayoutColumn
>
<
telerik:LayoutColumn
Span
=
"12"
SpanMd
=
"12"
SpanSm
=
"12"
SpanXs
=
"12"
>
<
asp:ContentPlaceHolder
ID
=
"ContentPlaceHolder1"
runat
=
"server"
>
</
asp:ContentPlaceHolder
>
</
telerik:LayoutColumn
>
</
Columns
>
</
telerik:LayoutRow
>
<
telerik:LayoutRow
RowType
=
"Container"
WrapperCssClass
=
"content"
WrapperHtmlTag
=
"Div"
HtmlTag
=
"None"
>
<
Content
>
<
telerik:RadPageLayout
runat
=
"server"
ID
=
"PageLayoutConent"
HtmlTag
=
"None"
GridType
=
"Fluid"
>
<
Rows
>
<
telerik:LayoutRow
RowType
=
"Container"
WrapperCssClass
=
"article1"
WrapperHtmlTag
=
"Div"
>
<
Content
>
</
Content
>
</
telerik:LayoutRow
>
</
Rows
>
</
telerik:RadPageLayout
>
</
Content
>
</
telerik:LayoutRow
>
</
Rows
>
</
telerik:LayoutRow
>
<
telerik:LayoutRow
RowType
=
"Container"
WrapperCssClass
=
"footer"
WrapperHtmlTag
=
"Div"
>
<
Content
>
<
div
style
=
"height: 84px"
><
a
style
=
"color: white"
>Sticky footer</
a
></
div
>
</
Content
>
</
telerik:LayoutRow
>
</
Rows
>
</
telerik:LayoutRow
>
</
Rows
>
</
telerik:RadPageLayout
>
</
div
>
</
form
>
</
body
>
</
html
>
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Responsive.Master" CodeBehind="ResponsivePage.aspx.vb" Inherits="GMAT.ResponsivePage" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"head"
runat
=
"server"
>
<
div
>
<
table
border
=
"1px"
height
=
"1000px"
style
=
"width:100%"
>
<
tr
>
<
td
style
=
"float:left;text-align:justify;font-size:0.9em;vertical-align:bottom;"
>
</
td
>
<
td
style
=
"float:right;text-align:justify;font-size:0.9em; color:White;"
>
The First line
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"float:left;text-align:justify;font-size:0.9em;"
>
</
td
>
<
td
style
=
"float:right;text-align:justify;font-size:0.9em;vertical-align:bottom;"
>
© Second line:
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"float:left;text-align:justify;font-size:0.9em;"
>
</
td
>
<
td
style
=
"float:right;text-align:justify;font-size:0.9em;vertical-align:bottom;"
>
© The Last line
</
td
>
</
tr
>
</
table
>
</
div
>
</
asp:Content
>