底部定位的 DIV答案

【问题标题】：Bottom positioned DIV底部定位的 DIV
【发布时间】：2010-12-01 01:13:48
【问题描述】：

这快把我逼疯了。我试图让页脚 div 位于页面底部，即使主要内容没有填满浏览器的高度。下面的代码有效，除了当我缩小浏览器然后页脚 div 与包装器 div 重叠，然后出现滚动条。我希望它像大多数网站（包括这个网站）一样与包装器 div 碰撞。我做错了什么？

<html>
    <head>
        <style>
            body { color:#000; margin: 0; height: 100%; }
            #wrapper {min-height: 100%; height: auto !important; height: 100%; background:#ff0000;
                margin: 0 auto -4em; text-align: left; width: 100%; }
            #header { width: 100%; height: 80px; }
            #content { width: 100%; background:#00ff00; }
            #footer { background:#0000ff; height: 4em; }
        </style>
    </head>

    <body>
        <div id="wrapper">
            <div id="header">
                some menus;
            </div>

            <div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac eros diam, nec ultrices nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed id ipsum libero. Sed ultricies orci ut magna vulputate eu congue justo condimentum. Phasellus a convallis ipsum. Nam nec sapien eget massa porta tristique. Proin metus diam, imperdiet nec eleifend a, faucibus eget quam. Nunc non lacus sit amet lorem vehicula viverra ut vitae sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id tellus id ligula dictum consequat non ut ligula. Morbi interdum felis sed turpis sagittis vulputate.
            </div>
        </div>

        <div id="footer">
            &copy; 2009 Somebody
        </div>
    </body>
</html>

【问题讨论】：

投票赞成关闭，许多重复之一：stackoverflow.com/questions/1112082/…
只在 SO 上搜索粘性页脚。
对不起，请关闭它。无论如何，Zayatzz 链接都起到了作用。

标签： html

【解决方案1】：

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

查看它的工作原理这个活生生的例子： http://www.toonklaas24.ee/

【讨论】：