locked
Footer not sticking to the bottom screen? RRS feed

  • Question

  • User563151344 posted

    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"'>;
    	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"'>;
    	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"'>;
    	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;
      ;
    }
    
    .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 {
    	;
    	bottom: 0;
    	width: 644px;
    	height: 20px;
    	margin: 0 auto;
    	/*text-align: center;
    	background-color: black;
    }*/
    
    /*footer {
    	background-color: orange;
    	;
    	left: 0;
    	bottom: 0;
    	height: 100px;
    	width: 100%;
    	overflow:hidden;
    }*/

    please assist. 

    Thanks 

    Monday, November 7, 2016 10:18 PM

Answers

  • User-707554951 posted

    Hi Shavendra Chand,

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

    <style type="text/css">
            html {
        ;
        min-height: 100%;
    }
    body {
        margin: 0 0 100px;
        /* bottom = footer height */
        padding: 25px;
    }
    .footer {
        background-color: orange;
        ;
        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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 3:06 AM

All replies

  • User-707554951 posted

    Hi Shavendra Chand,

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

    <style type="text/css">
            html {
        ;
        min-height: 100%;
    }
    body {
        margin: 0 0 100px;
        /* bottom = footer height */
        padding: 25px;
    }
    .footer {
        background-color: orange;
        ;
        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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 3:06 AM
  • User563151344 posted

    Thank you so much! Love You! Kiss

    Friday, November 11, 2016 2:48 AM