Question

如何在以下网站上为不同页面设置页脚：

http://www.optimimo.com/

http://www.optimimo.com/home/contact

我对如何修复不同页面底部的页脚感到困惑。

Answer 1

将height:100%添加到html, body和#pagewidth

现在将position:absolute; bottom:0添加到页脚

#pagewidth {
width: 100%;
height: 100%;
overflow: auto;
}
#footer {
font-family: 'PT Sans',Arial,Helvetica,sans-serif;
width: 100%;
background-color: #2d2d2d;
overflow: hidden;
padding: 24px 0;
margin: 20px 0 0;
color: #fff;
position: absolute;
bottom: 0;
line-height: 16px;
}

Answer 2

试试这个

#footer {
    background-color: #2D2D2D;
    bottom: 0;
    color: #FFFFFF;
    font-family: 'PT Sans',Arial,Helvetica,sans-serif;
    line-height: 16px;
    margin: 20px 0 0;
    overflow: hidden;
    padding: 24px 0;
    position: absolute;
    width: 100%;
}

Answer 3

这就是我所做的（@Sowmya，你忘了处理一些边缘案例）

html { height: 100%; }
body {
    min-height: 100%; /* Otherwise your page will have no background if the content is longer than one screen-height */
    position: relative; /* To let the footer allways be on page-bottom, not at one-screen-height */
}

#pagewidth { padding-bottom: 5em /* aprox. the height of the footer ... */ }

footer#footer { position: absolute; bottom: 0; left: 0; right: 0; width: 100% /* Fixes some IE mis-alignments ... */ }

如果您希望页脚始终位于屏幕底部，请将页脚设置为固定位置。

如何将页脚粘贴在页面底部

3 个答案: