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

Question

我有一个包含使用 php include 函数的元素的 div，下面我有一个页脚。仅当您滚动到页面底部时，页脚才可见，以节省空间。

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

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

Answer 1

听起来你正在寻找一个粘性页脚：

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

在这里拉小提琴。 ​</p>

这将允许footerdiv至少位于窗口的底部；随着main内容 div 的增长，它会相应地向下推页脚。

Answer 2

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