如何將頁腳添加到頁面底部

我想根據從數據庫中檢索的數據在頁面底部找到頁腳，但頁腳阻止了它下面的一些內容。請檢查圖像：如何將頁腳添加到頁面底部

請告訴我該怎麼做，下面是我的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只頁腳「頁腳」和class按鈕爲「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>

來源

2015-11-06 dpk

請在這裏分享您的html。 – Anubhav

@Anubhav它在JSP中。不在html – dpk

給填充底=頁腳和位置的高度：絕對到頁腳如下

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

來源

2015-11-06 08:44:48

我試過但它仍然是一樣請在我的jsp頁面看看。可能是你可以找到我要去哪裏錯了。 – dpk

分享你的網站的鏈接，以便我可以查看它 –

請檢查代碼..我編輯了密碼 – dpk

嘗試改變下面的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; 
}

來源

2015-11-06 08:30:07

我試過了，但它仍然是一樣的，請看看我的jsp頁面。可能你可以找到我要去哪裏錯了。 – dpk

嘿嘗試使用Firebug插件並在運行時編輯css。看一下JSP頁面並不會有多大幫助。編輯css運行時。 –

我相信正確的答案是在設計中，而不是在代碼中。

您基本上需要兩個，可能是一個頁面的三個部分。其中一個是可滾動的，另外兩個不是。

所以，本質上，這將是這樣的：

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

來源

2015-11-06 08:30:23 alok

最可能的是，你需要給上述頁腳邊距等於頁腳高度的容器。我認爲在你的CAS它是表格：

table { margin-bottom: 20px; }

但考慮把表放入其他容器。像：

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

來源

2015-11-06 08:32:18 tkeram

我試過了，但它仍然是一樣請在我的jsp頁面看看。可能是你可以找到我要去哪裏錯了。 – dpk

請更改CSS爲頁腳，然後再試一次：

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

來源

2015-11-06 08:34:17

我試過，但它仍然是一樣的，請看看我的jsp頁面。可能是你可以找到我要去哪裏錯了。 – dpk

你能給我一個網頁的網址嗎？ –

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>

來源

2015-11-06 08:34:50 Sasha

我試過，但它仍然是一樣請在我的jsp頁面看看。可能你可以找到我要去哪裏錯了。 – dpk

試圖改變

margin-top: 480px; 
position: relative;

來源

2015-11-06 08:39:19 ImSarah

我試過了，但仍然一樣請在我的jsp頁面看看。可能是你可以找到我要去哪裏錯了。 – dpk

提供您的html – ImSarah

如何將頁腳添加到頁面底部

回答

相關問題