Question

我有一个包含使用php include功能的元素的div，下面我有一个页脚。只有滚动到页面底部才能看到页脚，以节省空间。

问题是如果内容高度很小（例如300px），那么页脚不会放在页面底部，这会使布局看起来不那么好。

所以我的问题是，如果浏览器窗口上没有滚动条（意味着内容div高度很小），我可以将页脚放在底部吗？

Answer 1

听起来像sticky footer就是你要找的东西：

HTML：

<div id="wrap">
    <div id="main">content</div>
</div>

<div id="footer">footer</div>

CSS：

* { margin:0; padding:0; } 

html, body, #wrap { height: 100%; }

body > #wrap {
    height: auto; 
    min-height: 100%;
}

#main { 
    padding-bottom: 40px; /* must be same height as the footer */
}  

#footer { 
    position: relative;
    margin-top: -40px; /* negative value of footer height */
    height: 40px;
    clear:both;
    background: #c00;
}

Fiddle here.

这将允许footer div至少位于窗口底部;随着main内容div的增长，它会相应地压低页脚。

Answer 2

这只能通过JavaScript完成，因为您的服务器（PHP）无法知道窗口的高度。话虽如此，当然可以做到：如果内容小于浏览器窗口的高度，你可以例如在页脚div上设置position:fixed和bottom: 0px以将其粘贴到窗口的底部;否则，就让它放在内容的底部。

没有滚动条时，将页脚放在底部？

2 个答案: