Question

我一直在尝试为我的网站实现一个底栏，但是我觉得这个愿景相当困难。也许你可以开导我？

如果内容没有溢出边缘，我希望有一个位于浏览器窗口底部的底栏，但如果内容确实溢出，我想要内容底部的底栏。我更喜欢它是CSS解决方案，但它可能更好/更容易的其他东西，我不知道。也没有PHP。

我希望你理解我。

并提前感谢任何答案。

Answer 1

你看过http://www.cssstickyfooter.com/

吗？

Answer 2

假设底栏的高度是固定的，那就相当简单了。例如：

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <style type="text/css">
        html, body { height: 100%; margin: 0; padding: 0; }
        #content { min-height: 100%; }
        * html #content { height: 100%; } /* IE6 hack */
        #trailer { height: 2em; margin-top: -2em; background: yellow; }
        #pad { height: 2em; }
    </style>
</head><body>
    <div id="content">
        Content content content content content content content content content content content.
        <div id="pad"></div>
    </div>
    <div id="trailer">
        Bit at the bottom.
    </div>
</body></html>

Answer 3

像这样的东西可以解决问题，（请注意，为了确保页脚与内容不重叠），需要额外的包装div和一些padding-bottom，

<html>
<head>
    <title>Sticky Footer Test</title>

    <style>
        html, body {
            height: 100%;
            padding: 0px;
            margin: 0px;
        }

        * { 
            margin: 0px;
        }

        #container {
            min-height: 100%;
            height: auto !important;
            height/**/: 100%; /* for IE6 */
            background: #ddd;
        }

        #footer {
            position: relative;
            background: #555;
            margin-top: -100px;
            height: 100px;
        }

        #content {
            padding-bottom: 100px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="content">
            <p>Hello! I'm some content!</p>
        </div>
    </div>
    <div id="footer">
        <p>Hello! I'm a footer!</p>
    </div>
</body>
</html>

帮助底栏

3 个答案: