Question

我在我的网站上应用了Styck页脚的技术，但是我的内容需要在#main中垂直对齐，但由于botom padding-bottom: 180px的大小必须相同页脚，我的#main没有垂直排列。如果我取下这个填充，并在#main高度放置一些值，这可行！，但我的页脚并不总是在底部。在这种情况下我该如何处理？

摆弄padding-bottom:180px;：this link

没有padding-bottom:180px;的小提琴：this another link

请帮忙！

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

现在，您的页脚将始终“附加”到您的内容中。 Please see the Fiddle.

不能使用Sticky页脚技术垂直对齐div

1 个答案: