我想根据从数据库中检索到的数据在页面底部添加页脚,但是页脚阻止了其下的某些内容。
 请检查图像:javascript - 如何在页面底部添加页脚-LMLPHP

请告诉我该怎么做,这是我的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;
}


我仅将页脚的ID设置为“页脚”,将类按钮设置为“ mybutton”

请看一下我的jsp页面:

<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>

最佳答案

给padding-bottom =页脚的高度和位置:对页脚的绝对值,如下所示

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

07-24 09:44
查看更多