Html 页脚将不会停留在我的一页底部

html，正文{
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
背景图像：url（../images/bg.jpg）；
背景附件：固定；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
最小高度：100%；
}
/*----------------------标题样式------------------------------------*/
标题{
背景色：白色；
边框底部样式：实心；
溢出：自动；
高度：200px；
字体系列：“Freehand521BT”，Arial，无衬线；
}
标题p{
字体系列：“Freehand521BT”，Arial，无衬线；
保证金：20px 0px 0px 20px；
字体大小：60px；
}
收割台img{
浮动：对；
左边框：实心；
}
/*-------------------------------主导航样式--------------------------------*/
#主要链接{
边缘顶部：60像素；
}
#美联保险公司{
边缘底部：0px；
}
#主要链接a{
列表样式类型：无；
文字装饰：无；
颜色：黑色；
右边距：90像素；
左边距：-10px；
字体大小：25px；
}
#主要链接李{
显示：内联；
右侧填充：5px；
}
/*----------------------------------辅助导航样式----------------------------------------------------*/
李先生{
显示：内联；
列表样式类型：无；
}
.第二链接{
左侧填充：0px；
}
/*-------------------------------------主要内容样式--------------------------------------------------------*/
#内容包装{
背景色：rgba（231231231.7）；
边框样式：实心；
边界半径：10px；
边缘顶部：30px；
左边距：20px；
右边距：20px；
填充：15px；
字体系列：“Freehand521BT”，Arial，无衬线；
字号：17px；
}
#内容包装{
边框样式：实心；
}
/*-------------------------------------------页脚样式------------------------------------------------------*/
页脚{
背景色：#fff；
边框顶部样式：实心；
边缘顶部：20px；
宽度：100%；
高度：130像素；
字体系列：“Freehand521BT”，Arial，无衬线；
字体大小：15px；
}
#页脚导航{
浮动：对；
}
#李国宝{
显示：内联；
}
#页脚导航a{
文字装饰：无；
右边距：30px；
}

星星的捍卫者--官方水手文范佩奇！
星星的捍卫者






欢迎粉丝们！
欢迎来到官方的水手月亮粉丝页面！在这里你会发现很多关于水手月亮宇宙的信息！包括人物和反派，以及到目前为止的故事概述。我们还将不断更新本页面，了解水手月亮世界的最新情况

2014年7月5日-新的水手月亮动画，水手月亮水晶发布

©；版权所有2016 Jorge Goris。
由Jorge Goris设计和开发

尝试在外部页脚元素上使用此选项：

position: absolute;
bottom: 0;

---

您可以使用填充，或继续使用

底部

属性进一步调整位置。如果将底部属性中输入的数字设置为大于0（即“

5px

”），则该数字应包括

px

”。此值是底部的像素数/距离/数，因此添加更多值会将其向上推。

只需转到页脚样式并删除高度属性：

高度：130像素

---

这将允许页脚调整自己的高度。

应用此选项将页脚固定到底部， 如果此行为仅适用于一个页面，请确保使用唯一类

footer {
    position: fixed;
    bottom: 0;
}

如果内容大于可用空间，还可以添加

body {
   padding-bottom: 130px; // the height of the footer
}

或者，您应该探索使用flexbox构建UI以及一些回退。 这是一篇很好的文章

将其添加到

#contentwrap

：

padding-bottom: 130px; 
min-height: 100%;

然后将其发送到

页脚

：

position: relative;
margin-top: -130px;
clear: both;

---

如果以后更改页脚高度，请相应更改上面的值

这是不正确的，因为OP希望将页脚放在屏幕的底部，这是不正确的，因为如果内容大于屏幕，用户会滚动。页脚将滚动的内容非常感谢这项工作！要保存这段代码供以后使用，因为这种页脚情况对我尝试创建的所有页面来说都是一件麻烦事。再次感谢！现在我有一些空间，从标题到顶部和内容。我如何在我的内容和页脚之间创建相同大小的空间？@Fate你的意思是在内容底部，页脚上方有一个圆形边框（就像在顶部）？在顶部的主导航和我的内容之间有一些空白。如何在我的内容和页脚之间创建相同大小的空间？@fate add

margin-bottom:150px

至

#contentwrapper

（页脚高度+20px）此代码用于将页脚固定到屏幕底部，但OP希望将其放在文档底部，同时为较大屏幕在内容和页脚之间添加空格，以便页脚底部和屏幕底部之间没有空格。