如何在html文档中创建页脚答案

【问题标题】：How to create a footer in html document如何在html文档中创建页脚
【发布时间】：2021-02-12 18:07:42
【问题描述】：

在我解释这个问题之前，我先说一下，我在 Google 上搜索了很多，阅读了几个 Stack Overflow 的回复，除了尝试了一些东西之外，它还不太奏效。

另一个 HTML 页脚问题，但我似乎没有找到我的问题的答案，尽管似乎有很多关于此的问题；如果您在同一页面上向网站添加例如另一个表单（页脚位于布局框边框线下方），则要么是没有解释的非常奇怪的解决方案，要么是不起作用的解决方案。

我正在尝试创建页脚以将其粘贴在文档的末尾，我尝试了以下方法：

margin-top: 100px

在我向页面添加更多内容之前，这确实有效，页脚被推到布局边界线下方。然后我尝试将页脚设置为与position: relative 的相对位置，但这只是将页脚保持在页面中间。

我的 CSS 代码：

.box {
background-color: white ;
height: 800px ;
width: 600px ;
margin: 0px auto ;
border: 1px solid black ;
}

.header {
    text-align: center ;
    padding-left: 5px ;
}

.navigation {
text-align: center ;
font-size: 16px ;
font-family: verdana ;
}

.content {
font-size: 18px ;
font-family: verdana ;
padding-left: 10px ;
}

.contactForm {
font-size: 16px ;
font-family: verdana ;
}

.footer {
margin-top: 100px ;
text-align: center ;
font-size: 16px ;
font-family: verdana ;
width: 600px ;
height: 50px ;
background-color: #f6f6f6 ;
}

我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="testing.css" type="text/css">
</head>
<body bgcolor="#f6f6f6">
    <div class="box">
        <h3 class="header">My blog</h3>
        <hr/>
    <div class="navigation">
        <a href="#">Home</a>
        <a href="#">Posts</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>
    <hr/>
    <div class="content">
        <form class="contactForm" action="#" method="post">
            <table>
                <tr><td>Contact</td></tr>
                <tr><td>Name:</td><td><input type="text" name="name"></td></tr>
                <tr><td>E-mail:</td><td><input type="text" name="email"><td></tr>
                <tr><td>Message:</td><td><input type="textarea" name="message"></td></tr>
                <tr><td><input type="submit" name="submit"></td></tr>
            </table>
        </form>
    </div>
    <div class="footer">
        test
    </div>
</body>
</html>

似乎没有任何效果，我不得不说我开始有点沮丧，因为我已经阅读了几篇关于此的指南和文章，但其中很多只是说我必须设置宽度、高度以及相对位置，并没有显示您如何正确定位它们。

谁能解释一下如何创建一个合适的页脚？如果对代码也有解释就好了。

【问题讨论】：

CSS for Fixed Footer的可能重复
也是为什么我在第一段中解释了为什么我不认为是的原因

标签： html css

【解决方案1】：

CSS position:fixed; 应该可以解决问题。

.footer{
    position: fixed;
    text-align: center ;
    font-size: 16px ;
    font-family: verdana ;
    width: 600px ;
    height: 50px ;
    background-color: #f6f6f6 ;
}

小提琴：http://jsfiddle.net/pXBpc/1/

【讨论】：

这一直有效，直到您在包含在框中的页面上添加更多文本。如果我作为测试添加五个表单，则页脚被推到框的边界线下方，等等虽然是表格..也许我在这里遗漏了一些东西..我认为当内容到达页脚时框的内容高度和边界线应该扩展到更高的高度值所以我想这是一种方法.. 但是我该怎么做才能使页脚和边界线在内容足够靠近页脚时被向下推，这样表格就不会低于边界线
检查这个：jsfiddle.net/pXBpc/2无论你添加多少文本，页脚都会留在底部。如果您的问题仍然存在，请创建一个小提琴并将问题复制到那里。如果您创建一个复制问题的小提琴链接，人们更有可能帮助您。
刚刚发现现在..如果我将 .box 部分更改为具有“位置：相对”并删除了高度属性，然后将“位置：相对”添加到页脚，它工作得很好，框的高度和页脚自动调整其高度..我将再次阅读位置属性

【解决方案2】：

看起来你有一个开放的 div 开始，这不会有帮助。

变化：

<div class="box">
<h3 class="header">My blog</h3>
<hr/>

到

<div class="box">
<h3 class="header">My Blog</h3>
</div>

如果这没有帮助，那么您可以尝试将内容包装在容器中。我从this tutorial 中了解到这一点，我发现这很清楚。

【讨论】：

打开的 div 是其余元素的容器元素，不过请查看教程
它似乎永远不会关闭。据我所知，有 4 个
标签，只有 3 个
标签。

【解决方案3】：

.footer {
position:fixed;
bottom:0;
text-align: center ;
font-size: 16px ;
font-family: verdana ;
width: 600px ;
height: 50px ;
background-color: #f6f6f6 ;
}

【讨论】：

这不适用于盒子的高度，盒子周围有一个纯黑色边框，页脚放置在该边框线下方..看起来我不能发布它的图片在这里，但它没有按预期工作

【解决方案4】：

使用以下代码将页脚固定到页面底部：

.footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:50px;
   width:100%;//or 600 pixels if you don't want it to fill the bottom of the page
   background:#999;
}

【讨论】：