Question

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

<table>
    <tr><h2><img src="lock.jpg"  width="80" height="30"/>Welcome to Locker</h2></tr>     
    <tr><td> 
 <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>

    </form>
     </table>
        </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>
</tr>
</td>
</table>

Answer 1

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

使用<div></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>

Answer 2

你可以使用一些CSS和一些HTML来放置它，在你的表格标签中有：

然后它上面有一些css代码：

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

这会将表格置于底部

Answer 3

回答你的问题，你的桌面布局要有100％的高度，你需要设置一些CSS属性：

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

#my_table {
    height: 100%; 
}

在HTML中：

<table id="my_table">...</table>

Answer 4

只需将此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/

如何在不使用页脚标记的情况下将页脚对齐到页面底部

4 个答案: