Question

我的HTML代码：

<body id="main">
    <div id="header">
        <div id="name">
            <a href="index.html" title="Title" id="title">
            </a>

        </div>
        <nav id="menu">
            <ul id="items">
                ...
                ...    
                ...
            </ul>
        </nav>
    </div>

    <div id="container">

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

    <script src="functions.js">
    </script>
</body>

我的CSS：

body {
    margin: 0 auto;
    min-height: 100%;
}
#container {
    background-color: blue;
    height: auto;
    min-height: 100%;

}
#f {
    clear: both;
    background-color: red;
    border-top-color: #d6d8d8;
    border-top-width: 1px;
    border-top-style: solid;
    margin-left: 5%;
    width: 90%;
    text-align: center;
    position:sticky;
    bottom: 0;
    overflow: hidden;
}

我希望页脚位于页面底部，即使容器是空的（如本例所示），但它不起作用。我试图将容器的最小高度设置为100％，但是当我打开页面时，如果没有内容，它的高度为0

Answer 1

尝试使用position:fixed;

<强> FIDDLE DEMO

#f {
    clear: both;
    background-color: red;
    border-top-color: #d6d8d8;
    border-top-width: 1px;
    border-top-style: solid;
    margin-left: 5%;
    width: 90%;
    text-align: center;
    position:fixed;/**Change This***/
    bottom: 0;
    overflow: hidden;
}

Answer 2

将css样式更改为：位置是：固定; 底部：0; 并根据您的要求调整高度和宽度。你可以设置宽度：100％;还

Answer 3

你去了，jsfiddle的你的（改进的）代码： http://jsfiddle.net/erlingormar/Lprqwgpk/

更改了CSS选择器#f中的定位＆＃34; sticky＆＃34;到fixed。

position: fixed;

Answer 4

我使用此tutorial制作了粘性页脚。我认为使用起来既方便又方便。

CSS代码

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
#f {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

粘滞页脚位于页面底部

4 个答案: