粘滞页脚位于页面底部

My HTML code:

我的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>

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

I want the footer to be at the bottom of the page, even if the container is empty (like in this example), however it's not working. I've tried to set container's minimum height as 100%, but when I open the page, it's height is 0 if there is no content

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

4 个解决方案

#1

Try to use position:fixed;

尝试使用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;
}

#2

change the css styles to: position:fixed; bottom:0; and adjust height and width as per your requirement. You can set width:100%; also

将css样式更改为:position:fixed;底部:0;并根据您的要求调整高度和宽度。你可以设置宽度:100%;也

#3

There you go, your (improved) code on jsfiddle: http://jsfiddle.net/erlingormar/Lprqwgpk/

你去,你的(改进的)代码在jsfiddle:http://jsfiddle.net/erlingormar/Lprqwgpk/

Changed the positioning in the CSS selector #f from "sticky" to fixed.

将CSS选择器#f中的定位从“sticky”更改为fixed。

position: fixed;

#4

I made sticky footer using this tutorial. I think it's easy and convenient to use.

我使用本教程制作了粘性页脚。我认为它使用简单方便。

CSS CODE

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

#1