将页脚拉伸到页面底部

时间:2015-09-23 15:38:16

标签: html css

现在不同于此处的任何其他问题,我不要求让页脚进入页面底部。相反,我要问它是否可以将它从页面上的任何地方拉伸到页面底部。现在显然只有在页面较小的情况下才会发生这种情况,然后你的屏幕不会留下任何滚动条,让页脚随意地坐在那里,身体的背景颜色显示在页面的其余部分。

发生了什么:

https://gyazo.com/c116b286242f89c7b5e768a0bbdaddd8

我想要的是:

https://gyazo.com/d18a9dd6d229d9bfe2da96609ee8a9c8

请忽略阻止该页面的记事本。

我尝试过添加填充&am​​p;保证金 - 从底部到宽度100%等;

HTTP-://jsfiddle.net/q3v1tfL7/

2 个答案:

答案 0 :(得分:0)

如何解决此问题:

只需将内容包装在容器上方,将背景颜色设置为深蓝色,将其设置为100%宽度,将主体背景颜色设置为浅蓝色。确保包装器是主体的直接子节点或非宽度约束的容器(超过整个站点宽度)。

这应该可以解决问题。

最好的问候。

答案 1 :(得分:0)

这是你在找什么? https://jsfiddle.net/DIRTY_SMITH/n14nere5/1/

<强> CSS

h3{color: white;}
body {
    background-color: yellow; margin: 0;
}
.div1{
    background-color: blue; 
    text-align: center; 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    height: 50%;
}