无法使用粘滞页脚技术垂直对齐div [英] Can't vertically align a div with the technique of Sticky footer

问题描述

我在我的网站上应用了Styck脚注技术，但是我的内容需要在 #main 中垂直对齐，但由于botom padding-bottom：180px 当它必须与页脚大小相同时，我的 #main 不会垂直排列。如果我取下这个填充，并在 #main 高度处加上一些值，这可以起作用！，但是我的页脚并不总是在底部。在这种情况下我应该如何继续？

I am applying the technique of Styck footer on my site, but my content needs to be aligned both horizontally as vertically in the #main But due to the botom padding-bottom: 180px when this must be the same size of the footer, my #main does not line up vertically. If I take off this padding, and put some value at the #main height , this works!, but my footer is not always at the bottom. How should I proceed in this case?

小提琴 padding-bottom：180px; ：此链接

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

请帮助！

推荐答案

首先将您的HTML结构更改为

first change your HTML structure to

<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;
} 

现在您的页脚将始终附加到您的内容中。
请参阅小提琴。

Now your footer will always be "attached" to your content. Please see the Fiddle.

这篇关于无法使用粘滞页脚技术垂直对齐div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！