Html 保持页脚在响应网站的底部
我想让我的页脚始终显示在页面底部,而不是在页面内容很少时向上移动。我试过了Html 保持页脚在响应网站的底部,html,css,Html,Css,我想让我的页脚始终显示在页面底部,而不是在页面内容很少时向上移动。我试过了 body, html { height: 100%} html body.wide #wrapper.container { min-height: 100%; position: relative; padding-bottom: 226px!important;/*Footer height*/ } #containerfooter { position: absolute; bottom: 0; left: 0
body, html {
height: 100%}
html body.wide #wrapper.container {
min-height: 100%;
position: relative;
padding-bottom: 226px!important;/*Footer height*/
}
#containerfooter {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
但由于我的网站是响应性的,页脚高度会有所不同,这段代码会隐藏某些页面上的内容。有什么方法可以使这项工作正常吗?使用位置:固定。集装箱船
#containerfooter {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
有关“粘性页脚”,请参见此如果页脚高度随屏幕宽度而变化,则将其固定到视口或屏幕底部将不是解决方案 我得到的印象是,随着屏幕尺寸的减小,页脚中的内容将彼此包裹或折叠,因此,无论哪个元素包裹页面内容,都应设置最小高度
$(“#addBodyContent”)。在(“单击”,函数(){
$(“Pellenteskue居住者morbi tristique Sentectus et netus et malesuada Fame ac turpis egestas.前庭侵权码头,封建生活,ultricies eget,临时居住,ante.Donec eu libero sit quam egestas semper.Aenea ultricies mi Vita est.Mauris placerat eleifend leo.”。附录(“.page wrap.content”);
});
$(#addFooterContent”)。在(“单击”,函数()上{
$(“Pellentesque居住者morbi tristique Sentecus et netus et malesuada fames ac turpis egestas.tortor quam前庭,feugiat vitae,ultricies eget,Temporal sit amet,ante.Donec eu libero sit quam egestas semper.Aenea Ultrices mi vitae est.Mauris placerat eleifend leo.”)。附录(“.site footer.content”);
});代码>
*{
保证金:0;
}
html,
身体{
身高:92%;
字体系列:“Helvetica”、“Arial”、“FreeSans”、“Verdana”、“Tahoma”、“Lucida Sans”、“Lucida Sans Unicode”、“Luxi Sans”、“Sans serif”;
}
.换页{
最小高度:100%;
框大小:边框框;
填充:10px;
}
.换页:之后{
内容:“;
显示:块;
}
.网站页脚{
背景:黑色;
位置:相对位置;
左:0;
右:0;
底部:0;
最小高度:100px;
文本对齐:居中;
填充:10px;
颜色:白色;
框大小:边框框;
}
按钮。黑暗:悬停{
背景色:rgba(0,0,0,0.7);
}
按钮,黑色{
背景色:黑色;
边框:3倍纯黑;
填充:10px 30px;
颜色:白色;
光标:指针;
过渡:.7s;
}
按钮。灯:悬停{
背景色:#中交;
}
按钮灯{
背景色:白色;
边框:3倍纯白;
填充:10px 30px;
颜色:黑色;
光标:指针;
过渡:.7s;
}
.内容p{
边缘底部:10px;
}
.内容{
边框顶部:1件纯黑;
填充顶部:10px;
}
标题
添加内容
页脚
添加内容
你能用小提琴再现你的问题吗?这不是他想要的。他想要的是非常典型的“粘脚”。