Blog

Footer not sticking to the bottom screen? [Answered]RSS

2 replies

Last post Nov 11, 2016 02:48 AM by shavendrafiji

‹ Previous Thread|Next Thread ›

Shortcuts

shavendrafij...

Member

3 Points

15 Posts

Footer not sticking to the bottom screen?

Nov 07, 2016 10:18 PM|shavendrafiji|LINK

Hi All,

Im trying to make the footer stick to the bottom screen no matter the screen resolution.

tried a few things but its not working

My Site.Master is as follows:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="DASHBOARD_TEST3.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />


</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/" style="font-family: , Courier, monospace; font-size: xx-large; font-weight: bold; font-style: normal">DASHBOARD</a>
                    <%--<div class="col-md-6" style="color: #FFFFFF">Log out</div>--%>
                </div>



                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Register">Register</a></li>
                                <li><a runat="server" href="~/Account/Login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>

            </div>
        </div>

        <div class="headerTwo" style="background-color: #4A4A4A">
            <div class="rows">

                <div class="col-md-12" style="color: #FFFFFF">
                   <marquee direction="right left"><strong>Quality, Affordable Housing is a key element of a strong and vibrant Fiji!</strong></marquee>
                   
                </div>
                <div class="col-md-4">
                    Welcome Shavendra! 
                </div>
                <div class="col-md-4">
                    Test 1
                </div>
            </div>

            <%--<div class="rows">
                <div class="col-md-3 col-md-4">
                    Test 1
                </div>
                <div class="col-md-4">
                    Welcome Shavendra! 
                </div>
                <div class="col-md-4">
                    Test 1
                </div>
            </div>--%>





        </div>

        <div class="outerTable ">
            <!-- 3-kpanel system -->


            <div class="left" runat="server" style="background-color: #212221; border-right-style: solid;">

                <!-- 3-panel system -->

                <div style="text-align: center; vertical-align: top; color: #FFFFFF;">
                    <h3>Navigation</h3>
                </div>

                <div id="tree" style="">
                </div>

                <script src="Scripts/bootstrap-treeview.min.js"></script>
                <script>
                    var mytree = [
                      {
                          text: "Dashboard",
                          //color: "#000975",
                          //backColor: "#FFFFFF",

                          href: "http://192.1.50.105/Dashboard/Test.aspx",
                          selectable: false,
                          tags: ['available'],
                          //nodes: [
                          //  {
                          //      text: "Child 1",
                          //      nodes: [
                          //        {
                          //            text: "Grandchild 1"
                          //        },
                          //        {
                          //            text: "Grandchild 2"
                          //        }
                          //      ]
                          //  },
                          //  {
                          //      text: "Child 2"
                          //  }
                          //]
                      },
                      {
                          text: "Applications",
                          //color: "#000975",
                          //backColor: "#FFFFFF",

                          //href: "/Test.aspx",
                          selectable: false,
                          tags: ['available'],
                          nodes: [
                            {
                                text: "Report Apps",
                                icon: "glyphicons-new-window",

                                //color: "#DD6E42",
                                //backColor: "#33CCCC",
                                href: "http://192.1.50.15/ReportApp/",
                                selectable: false,
                                tags: ['available'],
                                //nodes: [
                                //  {
                                //      text: "Grandchild 1"
                                //  },
                                //  {
                                //      text: "Grandchild 2"
                                //  }
                                //]
                            },
                            {
                                text: "SMS Live",
                                icon: "glyphicons-new-window",
                                //color: "#DD6E42",
                                //backColor: "#33CCCC",
                                href: "http://192.1.50.15/SMSLIVE",
                                selectable: false,
                                tags: ['available'],
                            },
                             {
                                 text: "FMMS",
                                 icon: "glyphicons-new-window",
                                 //color: "#DD6E42",
                                 //backColor: "#33CCCC",
                                 href: "http://192.1.50.9/fmms/",
                                 selectable: false,
                                 tags: ['available'],
                             },
                             {
                                 text: "ESS",
                                 icon: "glyphicons-new-window",
                                 //color: "#DD6E42",
                                 //backColor: "#33CCCC",
                                 href: "http://192.1.50.15/ESS",
                                 selectable: false,
                                 tags: ['available'],
                             }
                          ]

                      },
                      {
                          text: "Forms",
                          //color: "#000975",
                          //backColor: "#FFFFFF",

                          href: "http://192.1.50.105/Dashboard/FormsHA.aspx",
                          selectable: false,

                          tags: ['available'],

                          //nodes: [
                          //  {
                          //      text: "CustomerRelations",
                          //      icon: "glyphicons-new-window",

                          //      //color: "#DD6E42",
                          //      //backColor: "#33CCCC",
                          //      href: "http://192.1.50.15/ReportApp/",
                          //      selectable: false,
                          //      tags: ['available'],
                          //      //nodes: [
                          //      //  {
                          //      //      text: "Grandchild 1"
                          //      //  },
                          //      //  {
                          //      //      text: "Grandchild 2"
                          //      //  }
                          //      //]
                          //  },
                          //  {
                          //      text: "Lending",
                          //      icon: "glyphicons-new-window",
                          //      //color: "#DD6E42",
                          //      //backColor: "#33CCCC",
                          //      href: "http://192.1.50.15/SMSLIVE",
                          //      selectable: false,
                          //      tags: ['available'],
                          //  },
                          //   {
                          //       text: "Finance & Admin",
                          //       icon: "glyphicons-new-window",
                          //       //color: "#DD6E42",
                          //       //backColor: "#33CCCC",
                          //       href: "http://192.1.50.9/fmms/",
                          //       selectable: false,
                          //       tags: ['available'],
                          //   },
                          //   {
                          //       text: "Land-HouseDev",
                          //       icon: "glyphicons-new-window",
                          //       //color: "#DD6E42",
                          //       //backColor: "#33CCCC",
                          //       href: "http://192.1.50.15/ESS",
                          //       selectable: false,
                          //       tags: ['available'],
                          //   },
                          //   {
                          //       text: "CEO",
                          //       icon: "glyphicons-new-window",
                          //       //color: "#DD6E42",
                          //       //backColor: "#33CCCC",
                          //       href: "http://192.1.50.15/ESS",
                          //       selectable: false,
                          //       tags: ['available'],
                          //   }
                          //]
                      },
                      {
                          text: "HA Website",
                          //color: "#000975",
                          //backColor: "#FFFFFF",
                          href: "http://www.housing.com.fj",
                          selectable: false,
                          tags: ['available'],
                      },
                      
                      {
                          text: "Policies",
                          href: "http://192.1.50.105/Dashboard/Account/Register.aspx",
                          //href: "~/navigation/vacancy.aspx",
                          selectable: false,
                          tags: ['available'],
                      },
                      {
                          text: "Vacancies",
                          href: "http://192.1.50.105/Dashboard/Account/Register.aspx",
                          //href: "~/navigation/vacancy.aspx",
                          selectable: false,
                          tags: ['available'],
                      }
                    ];

                    $('#tree').treeview({ onhoverColor: "orange", color: " #FFFFFF", backColor: "#1A5F76", enableLinks: true, data: mytree });

                </script>

            </div>

            <div class="container middle">
                <div class="container body-content">
                    <asp:ContentPlaceHolder ID="MainContent" runat="server">
                    </asp:ContentPlaceHolder>
                    <hr />
                </div>
                <!-- 3-panel system -->
                <!-- Bootstrap 3 content goes here - note we're inside a .container -->
                <%--  <h1>Middle</h1>
                <p>Flexible width</p>--%>
            </div>

            <div id="myFeed" class="right" style="background-color: #7DBEFF; border-left-style: solid;">
                <!-- 3-panel system -->
                <%--  <h2>News Feed</h2> --%>
                <h2>BBC News</h2>
                <hr />

                <asp:Repeater ID="rssRepeater" runat="server">
                    <ItemTemplate>
                        <asp:HyperLink ID="HyperLink1" runat="server"
                            NavigateUrl='<%#Eval("link")%>'
                            Text='<%#Eval("title")%>' ForeColor="#005300"></asp:HyperLink>
                        <tr>
                            <td style="background-color: #C2D69B">
                                <asp:Label ID="Label1" runat="server"
                                    Text='<%#Eval("description")%>'></asp:Label>
                            </td>
                        </tr>
                        <hr />
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </div>
        <div class="footer">
            <br />
            <h2 style="margin: 0;">Footer</h2>
            <br />
        </div>
    </form>
</body>
</html>

My CSS as follows:

/* Move down content because we have a fixed navbar that is 50px tall */
body {
	padding-top: 50px;
	/*padding-bottom: 168px;*/
	/*height:100%;*/

	min-height: 100%;
   
	height: 100%;
	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}


/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
	padding-left: 8px;
	padding-right: 8px;
	padding-top:0px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
	white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
	max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
	.jumbotron {
		margin-top: 20px;
	}
	.body-content {
		padding: 0;
	}
}


.red {
	background-color: lightsalmon;
}

.blue {
	background-color: lightblue;
}

/* Apply borders to all elements inside a .borders div parent - just for demo */
.borders, .borders * {
	border: 1px solid black;
}
.header {
	text-align: left;
	background-color: lightgray;
}

.footer {
	text-align: center;
	 background-color: black;
	 height: 142px;

 
}

/*
	* 3-panel system = table layout
	*/
.outerTable {
	width: 100%;
	display: table;
	margin-left: 0%;
	

}
.left {
	display: table-cell;
	width: 200px;

   
}
.middle {
	display: table-cell;
}
.right {
	display: table-cell;
	width: 200px;
}


/*TREE VIEW*/
.AspNet-TreeView ul {
	list-style: none;
	<font color='"Red"'>padding: 0;
	margin: 0;</font>
}

.AspNet-TreeView-Root {
	border-bottom: solid 1px #DDD;
	<font color='"Red"'>position: relative;
	width: 200px;</font>
}

.AspNet-TreeView-Expand {
	padding: 6px 4px 5px 4px;
	height: 0px !important;
	background: url(../../images/structure/node-plus.gif) 0px 0px no-repeat;
	cursor: pointer;
	<font color='"Red"'>position: absolute;
	font-size: 1px;
	top: 9px;
	left: 8px;</font>
}

.AspNet-TreeView-Collapse {
	padding: 6px 4px 5px 4px;
	height: 0px !important;
	background: url(../../images/structure/node-minus.gif) 0px 0px no-repeat;
	cursor: pointer;
	<font color='"Red"'>position: absolute;
	font-size: 1px;
	top: 9px;
	left: 8px;</font>
}

.headerTwo {
	width: 100%;
	height: 50px;
	background-color: #4A4A4A;
	}


/*LoginModalCSS*/
@import url(http://fonts.googleapis.com/css?family=Roboto);

/****** LOGIN MODAL ******/
.loginmodal-container {
  padding: 30px;
  max-width: 350px;
  width: 100% !important;
  background-color: #F7F7F7;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  font-family: roboto;
}

.loginmodal-container h1 {
  text-align: center;
  font-size: 1.8em;
  font-family: roboto;
}

.loginmodal-container input[type=submit] {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  position: relative;
}

.loginmodal-container input[type=text], input[type=password] {
  height: 44px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  /* border-radius: 2px; */
  padding: 0 8px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.loginmodal-container input[type=text]:hover, input[type=password]:hover {
  border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.loginmodal {
  text-align: center;
  font-size: 14px;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  height: 36px;
  padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
  user-select: none; */
}

.loginmodal-submit {
  /* border: 1px solid #3079ed; */
  border: 0px;
  color: #fff;
  text-shadow: 0 1px rgba(0,0,0,0.1); 
  background-color: #4d90fe;
  padding: 17px 0px;
  font-family: roboto;
  font-size: 14px;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
}

.loginmodal-submit:hover {
  /* border: 1px solid #2f5bb7; */
  border: 0px;
  text-shadow: 0 1px rgba(0,0,0,0.3);
  background-color: #357ae8;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
}

.loginmodal-container a {
  text-decoration: none;
  color: #666;
  font-weight: 400;
  text-align: center;
  display: inline-block;
  opacity: 0.6;
  transition: opacity ease 0.5s;
} 

.login-help{
  font-size: 12px;
}

/*body { 
  background: url(~/Pictures/Koala.jpg) no-repeat center center fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}*/

/*.footer {
	position: absolute;
	bottom: 0;
	width: 644px;
	height: 20px;
	margin: 0 auto;
	/*text-align: center;
	background-color: black;
}*/

/*footer {
	background-color: orange;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100px;
	width: 100%;
	overflow:hidden;
}*/

please assist.

Thanks

Cathy Zou

Star

8640 Points

2882 Posts

Re: Footer not sticking to the bottom screen?

Nov 08, 2016 03:06 AM|Cathy Zou|LINK

Hi Shavendra Chand,

From your description, I suggest you could refer to the following example,

<style type="text/css">
        html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
    /* bottom = footer height */
    padding: 25px;
}
.footer {
    background-color: orange;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow:hidden;
}
    </style>

    <article>
    <!-- or <div class="container">, etc. -->
     <h1>James Dean CSS Sticky Footer</h1>

    <p>Blah blah blah blah</p>
    <p>More blah blah blah</p>
</article>
     <div class="footer">
            <br />
            <h2 style="margin: 0;">Footer</h2>
            <br />
        </div>

Screenshot as below:

You also could refer to the following link:

https://css-tricks.com/couple-takes-sticky-footer/

http://jsfiddle.net/3L3h64qo/2/

Best regards

Cathy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

- Reply
shavendrafij...
Member

3 Points

15 Posts

Re: Footer not sticking to the bottom screen?

Nov 11, 2016 02:48 AM|shavendrafiji|LINK

Thank you so much! Love You!

‹ Previous Thread|Next Thread ›