Question

我希望根据从数据库中检索的数据在页面底部设置页脚，但页脚会阻止其下的某些内容。请查看图片：

请告诉我怎么做以下是我的css：

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

我只将内容作为“页脚”，类按钮作为“mybutton”

请查看我的jsp页面：

sizeof

Answer 1

给填充底部=页脚高度和位置：绝对到页脚如下

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

Answer 2

尝试将以下css更改为：

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

Answer 3

我认为对此的正确答案是设计，而不是代码。

你基本上需要两个，可能是一个页面的三个部分。其中一个是可滚动的，另外两个是不可滚动的。

所以，基本上，它会是这样的：

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

Answer 4

很可能你需要让容器在页脚边缘上方等于页脚高度。我想在你的cas中它是表：

table { margin-bottom: 20px; }

但是考虑将表放入其他容器中。像：

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

Answer 5

请更改该页脚的CSS，然后重试：

Answer 6

   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>

如何在页面底部添加页脚

6 个答案: