This is a migrated thread and some comments may be shown as answers.

How to make Sticky footer in master page, created from Telerik Responsive Web Site template

6 Answers 320 Views

PageLayout

This is a migrated thread and some comments may be shown as answers.

Vasssek asked on 05 Mar 2015, 12:56 PM

Good afternoon,

Could somebody give me an advice, how can I make sticky footer in my master page, created from Telerik Responsive Web Site template ?

First I will try to describe the steps I've done, yet.

1. Through VS2010 Telerik menu, UI for ASP.NET AJAX - Create New Telerik Project
2. Choosed Telerik C# Web Forms Site for .NET Framework 4.0
3. Choosed project type - Responsive Web SiteAfter whole project has been created.

I put this into <%--Footer--%> section in MasterPage.master file:

<telerik:LayoutRow>

<Columns>

<telerik:LayoutColumn CssClass="footer">

<hr />

</telerik:LayoutColumn>

</Columns>

</telerik:LayoutRow>

Then I set in default.css this:

#wrapper .footer

{

background-color: orange;

position: absolute;

left: 0;

bottom: 0;

height: 100px;

width: 100%;

}

And in base.css I set this:

html {

position: relative;

min-height: 100%;

}

body {

font: normal 16px "Segoe UI", Arial, sans-serif;

color: #555555;

margin: 0 0 125px;

padding: 25px;

}

form {

height: 100%;

margin: 0;

padding: 0;

}

The result is on this link: http://www.screencast.com/t/8KDAHJQTa

Question is, how could I achieve something like this ? http://mystrd.at/data/sticky_footer.html

Thank you for your advice and help.

Best regards

Vasssek

6 Answers, 1 is accepted

answered on 10 Mar 2015, 09:47 AM

pageLayout-sticky-footer.zip

Hi Vaclav,

Please, find a sample project in the attachment where we have applied a sample solution for achieving a sticky footer. We hope this solution will meet your expectations.

Regards,
Magdalena
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Accepted

answered on 11 Mar 2015, 09:35 AM

PageLayout-stickyFooter.zip

Hello Vaclav,

By removing the bottom margin from the <body> element and adding the following CSS styles, you can achieve the sticky footer in the example:

#wrapper {

min-height: 100%;

position: relative;

}

#MasterLayout {

min-height: 100%;

}

html .main {

box-sizing: content-box;

padding-bottom: 150px;

}

#MasterLayout,

.main + div {

position: static;

}

Where the ".main" is the page layout row after the ".head" row.

Please, find an example solution in the attachment. We have added your custom styles in the head of the master page.

Regards,
Magdalena
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.