html - 无法使用 Sticky footer 技术垂直对齐 div

Question

我在我的网站上应用了 Styck 页脚的技术，但是我的内容需要水平对齐和垂直对齐#main但是由于padding-bottom: 180px底部必须与页脚的大小相同，所以我#main不会垂直对齐。如果我去掉这个填充，并在#mainheight 设置一些值，这可行！但我的页脚并不总是在底部。在这种情况下我应该如何处理？

摆弄padding-bottom:180px;：这个链接

小提琴没有padding-bottom:180px;：这是另一个链接

请帮忙！

Answer 1

首先将您的 HTML 结构更改为

<div id="wrap">
    <div id="main" class="block clearfix">
        <div id="wrapper" class="content">
            <p>text</p>
       </div>
    </div>
    <div id="footer"> <!-- footer within wrapper -->
       footer content
    </div>
</div>

并将您的 CSS 更改为

#footer { 
    position:relative;
    margin-top: 0; 
    height: 180px;
    clear:both;
    background:#FFCC00;
} 

现在，您的页脚将始终“附加”到您的内容。 请看小提琴。