Reputation: 339

How to add footer to the bottom of the page

I want to have footer at the bottom of the page according to data retrieve from the database, but footer is blocking some content under it. Please check the image:

please tell me how to do that below is my css:

body{
    padding-bottom: 15px;
    position: relative;
    height: auto;
    min-height: 100%;
}
table{
         padding-bottom: 15px;  
}
form,table,h3,h4,#retrieveform{
    text-align: center;
    margin: 0px auto;
}


table, th, td {
    border-collapse: collapse;
}
th, td {
    padding: 10px;
    text-align: left;
}
table tr:nth-child(even) {
    background-color: hsla(120,100%,75%,0.3);;
}
table tr:nth-child(odd) {
   background-color:hsla(120,100%,25%,0.3);;
}
table th    {
    background-color: #B0B0B0  ;
    color: white;
}

.myButton {
        -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
        -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
        box-shadow: 0px 1px 0px 0px #f0f7fa;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
        background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
        background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
        background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
        background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
        background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);
        background-color:#33bdef;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #057fd0;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family:Arial;
        font-size:15px;
        font-weight:bold;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:0px -1px 0px #5b6178;
}
.myButton:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
        background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
        background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
        background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
        background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
        background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);
        background-color:#019ad2;
}
.myButton:active {
        position:relative;
        top:1px;
}
#footer {
   position:fixed;
   margin-top: -450px; 
   padding-top: 0;
   color:white;
   bottom:0;
   text-align:center;
   width:100%;
   height:20px;   /* Height of the footer */
   background:black;
}

i have given id only to footer as "footer" and class button as "mybutton"

Please have a look at my jsp page:

<body>
    <%@include file="/header.jsp" %>
    <form>
<%
    if (session.getAttribute("name") == null) {
        out.println( "<p style=\"color:red\"><Strong>**Please Login First!**<strong></p> " );
        response.sendRedirect("index.jsp");
        } 
    String empid = request.getParameter("Emp_id");
    String from = request.getParameter("From");
    String to = request.getParameter("To");
    Connection conn= null;
    PreparedStatement ps = null; 
    ResultSet rs = null;   
    PreparedStatement ps1= null; 
    ResultSet rs1= null; 
    PreparedStatement ps2= null; 
    ResultSet rs2= null; 
    try {

        conn = ConnectionProvider.getConn(); 
        ps = conn.prepareStatement("SELECT * FROM logintable WHERE Emp_id=? and LoginDate BETWEEN ? AND ?; ");
        ps1 = conn.prepareStatement("SELECT CAST((SEC_TO_TIME(SUM(TIME_TO_SEC(`Total`))) ) AS char) AS Total FROM logintable  WHERE Emp_id=? AND LoginDate BETWEEN ? AND ?;");
        ps2 = conn.prepareStatement("SELECT CAST((SEC_TO_TIME(SUM(TIME_TO_SEC(`Overtime`))) ) AS char) AS Overtime FROM logintable  WHERE Emp_id=? AND LoginDate BETWEEN ? AND ?;");

        ps.setString(1, empid); 
        ps.setString(2, from);
        ps.setString(3, to);
        ps1.setString(1, empid); 
        ps1.setString(2, from);
        ps1.setString(3, to);
        ps2.setString(1, empid); 
        ps2.setString(2, from);
        ps2.setString(3, to);

%>
<br>
<table>
<tr>
    <td> <strong>Employee Id:</strong></td><td><%=request.getParameter("Emp_id")%></td>
    <td><strong>From Date:</strong></td><td><%=request.getParameter("From")%></td>
    <td><strong>To Date:</strong></td><td><%=request.getParameter("To")%></td></tr></table>
        <%
        out.print("<table border=1>");  
        out.print("<caption><h4>TIMESHEET</h4></caption>");  
        rs = ps.executeQuery();
        rs1=ps1.executeQuery();
        rs2=ps2.executeQuery();
         ResultSetMetaData rsmd=rs.getMetaData();  
            int total=rsmd.getColumnCount();  

            out.print("<tr>");  
            for(int i=1;i<=total;i++)  
            {  
            out.print("<th>"+rsmd.getColumnName(i)+"</th>");  
            }  

            out.print("</tr>");  

            while(rs.next())  
            {  
            out.print("<tr><td>"+rs.getString(1)+"</td><td>"+rs.getString(2)+"</td><td>"+rs.getString(3)+"</td><td>"+rs.getString(4)+"</td><td>"+rs.getString(5)+"</td><td>"+rs.getString(6)+"</td><td>"+rs.getString(7)+"</td><td>"+rs.getString(8)+"</td><td>"+rs.getString(9)+"</td><td>"+rs.getString(10)+"</td></tr>");    

            }  




             while (rs1.next())  
            {
               String Total = rs1.getString("Total");
               out.println("<tr><td><Strong>Total is:</strong></td><td>" + Total + "</td><br>");
            }
            while (rs2.next())  
            {
               String Overtime = rs2.getString("Overtime");
               out.println("<td><Strong>Overtime is:</strong></td><td>" + Overtime + "</td></tr><br>");
            }
              out.print("</table>");
        }
        catch(Exception e){
            e.printStackTrace();        
        }
        finally {  
             if (conn != null) {  
                try {  
                    conn.close();  
                } catch (SQLException e) {  
                    e.printStackTrace();  
                }  
            } 

            if (ps != null) {  
                try {  
                    ps.close();  
                } catch (SQLException e) {  
                    e.printStackTrace();  
                }  
            }  
            if (rs != null) {  
                try {  
                    rs.close();  
                } catch (SQLException e) {  
                    e.printStackTrace();  
                }  
            }  

        }  

%>
<a href="logout.jsp" class="myButton" >Logout</a></form>
   <div id="footer">

    </div>
    </body>

Upvotes: 1

Answers (6)

Harsh Sanghani

Reputation: 1712

Please change the css for that footer and try again:

#footer {
   padding-top: 0;
   color:white;
   bottom:0;
   text-align:center;
   width:100%;
   height:20px;   /* Height of the footer */
   background:black;
}

Upvotes: 0

sukhwinder kaur

Reputation: 121

Give padding-bottom = Height of footer and position :absolute to footer as follows

.content {
           padding-bottom: 35px;
         }
#footer {    
          bottom: 0;
          font-size: 10pt;
          height: 35px; 
          position: absolute;   
          width: 100%; 
        }

Upvotes: 3

Sasha

Reputation: 19

   your css: 

    html,
    body {
        margin:0;
        padding:0;
        height:100%;
    }
    #wrapper {
        min-height:100%;
        position:relative;
    }
    #header {
        background:#ededed;
        padding:10px;
    }
    #content {
        padding-bottom:100px; /* Height of the footer element */
    }
    #footer {
        background:#ffab62;
        width:100%;
        height:100px;
        position:absolute;
        bottom:0;
        left:0;
    }

your html:
<title>How To Keep Your Footer At The Bottom of The Page - CSSReset.com</title>

    <link rel="stylesheet" type="text/css" href="style.css" />  

    <!--[if lt IE 7]>
        <style type="text/css">
            #wrapper { height:100%; }
        </style>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <div id="header">
        </div><!-- #header -->

        <div id="content">
        </div><!-- #content -->

        <div id="footer">
        </div><!-- #footer -->

    </div><!-- #wrapper -->

</body>

</html>

Upvotes: 0

tkeram

Reputation: 214

Most probably you need to give the container above footer margin-bottom equal to height of footer. I think in your cas it is the table:

table { margin-bottom: 20px; }

But consider putting the table into some other container. Like:

<header class="header">...</header>
<div class="content">
    ...
    <table>
        ...
    </table>
    ...
</div>
<footer class="footer">...</footer>

Upvotes: 0

alok

Reputation: 510

I believe the right answer to this is in design, not in code.

You basically need two, may be three sections of a page. One of them is scrollable, the other two aren't.

So, essentially, it would be something like:

<div class="header">
...content...
</div>
<div class="scrollable">
...content...
</div>
<div class="footer">
...content...
</div>

Upvotes: 0

Vaibhav Sah

Reputation: 142

Try changing the following css as:

body{
    position: relative;
    height: auto;
    min-height: 100%;
}
table{
     margin-bottom: 15px;  
}

#footer {
   position:relative;
   clear:both;
   margin-top: -450px; 
   padding-top: 0;
   color:white;
   bottom:0;
   text-align:center;
   width:100%;
   height:20px;   /* Height of the footer */
   background:black;
}

Upvotes: 1

How to add footer to the bottom of the page

Answers (6)

Related Questions