1

我是初学者，我有疑问。我创建了这个 HTML 表格，我需要将页脚放在页面底部而不使用页脚标记。有没有办法通过使用表格将页脚放在底部？会有帮助的

<table>
  <tr>
    <h2><img src="lock.jpg"  width="80" height="30"/>Welcome to Locker</h2>
  </tr>  
  <tr>
    <td>
      <form>
        <table align="center">
          <tr>
            <td align="right">
              <h4><p> Lock name:</p></h4>
            </td>
            <td align="left">
              <h4>
                <input type="text" maxlength="8" name="lock" onkeyup="return AllowLock()"/>
              </h4>
            </td>
            <td>
              <h6 id="errfn"> </h6>
            </td>
          </tr>
          <tr>
            <td align="right">
              <h4><p> Key:</p></h4>
            </td>
            <td align="left">
              <h4>
                <input type="text" maxlength="8" name="keys" onkeyup="return AllowKey()"/>
              </h4>
            </td>
            <td>
              <h6 id="error"></h6>
            </td>
          </tr>
          <tr>
            <td align="right"></td>
            <td align="left">
              <input id="gobutton" type="submit" value="Go!"/>
            </td>
          </tr>
        </table>
      </form>
    </td>
  </tr>
  <tr>
    <td>
      <p id="about">About</p>
      <p id="contact">Contact us</p>
      <p id="career">Careers</p>
      <p id="press">Press</p>
    </td>
  </tr>
</table>
4

4 回答 4

0

只需将此 css 添加到您的任何类或 id 中，您就可以将任何元素放在底部。

     //CSS 
{ 
position:fixed; /*Set this to absolute if you do not want it to be on bottom always*/
width:100%; 
bottom:0px; 
left:0px;
height:80px; 
}

//实际使用

<html>
<head>
<style type="text/css">
.footer {
    position: fixed;
    width: 100%;
    bottom: 0px;
    left: 0px;
    background: rgb(216, 216, 216);
    height: 80px;
    text-align: center;
}

.content {
  position: relative;
  width: 100%;
  background: rgb(16, 16, 85);
  height: 600px;
  margin-bottom: 100px;
  color: white;
}
</style>
</head>
<body>

    <!--Page Content-->
    <div class="content">
        <table align="center">
            <tr>
                <td>Sample1</td>
                <td>Sample2</td>
            </tr>
            <tr>
                <td>Sample1</td>
                <td>Sample2</td>
            </tr>
        </table>
    </div>
    <!--Footer Table-->
    <table class="footer">
        <td>Footer Goes Here</td>
    </table>
</body>
</html>

我创建的 JSFiddle 示例：http: //jsfiddle.net/mm6qc/

于 2013-09-25T11:52:06.803 回答
0

回答您的问题，为了让您的表格布局具有 100% 的高度，您需要设置一些 CSS 属性：

html, body {
    height: 100%;
    margin: 0;
    padding: 0; 
}

#my_table {
    height: 100%; 
}

在 HTML 中：

<table id="my_table">...</table>
于 2013-09-25T11:51:43.520 回答
0

您可以使用一些 CSS 和一些 HTML 来放置它，在您的表格选项卡中有：

然后在它上面有一些css代码，例如：

<script>
.table {
     position:fixed;
     bottom:0px;
}
</script>

这会将表格放在底部

于 2013-09-25T11:49:56.287 回答
0

看看这里http://jsfiddle.net/25LKc/

使用 a<div><!-- footer content here --></div>作为包装器

位置固定；

       <!-- your html here -->
   </td> 
</table>

<div class="footer"></div>

<style type="text/css">
.footer {
    background-color:orange;
    width:100%;
    height:400px;
    position:fixed;
    bottom:0px;
}
</style>
于 2013-09-25T11:47:32.710 回答