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

Question

我有一个包含使用 php 包含函数的元素的 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 以将其粘贴到窗口底部；否则，就让它在内容的底部。