Question

http://codepen.io/RobbyT15/pen/otyfw/

我正在进行网站设计，我正在尝试制作一个动态页脚，无论屏幕大小如何，它都会停留在窗口的底部。在CSS中使用fixed属性不起作用，因为它不随页面滚动。我已经用浮动div做了类似的事情，然而，当我试图将它与页脚结合时，它不起作用。我查看了其他类似的问题，但每个人都说要添加position: fixed CSS规则。有什么建议吗？

编辑*我做了所有人建议的更改，但是，页脚没有“附加到窗口的底部。对不起，我对此感到非常痛苦。”

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Robert Thompson</title>
        <link rel="stylesheet" href="styles/desktop.css">
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="includes/init.js"></script>
        <script type="text/javascript" src="includes/main.js"></script>
    </head>
    <body>
        <div id="main">
            <header></header>
            <div id="content">
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
            </div>
            <footer></footer>
        </div>
    </body>
</html>

CSS

body{
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #757575;
    color: #FFFFFF;
    z-index: 0;
}

header, footer{
    position: relative;
    display: block;
    width: 100%;
    height: 50px;
    background-color: #000000;
    z-index: 2;
}

header{
    border-bottom: 3px inset #DDAA00;
}

footer{
    border-top: 3px outset #DDAA00;
}

#main{
    position: absolute;
    background-color: red;
    z-index: 1;
}

#content{
    position: relative;
    left: 250px;
    width: 70%;
    z-index: 1;
}

Answer 1

您需要使用position relative和absolute。因此，对于您的容器（页面正文）添加position: relative，然后添加到页脚，您将添加position: absolute无需保证金。另请参阅TylerH指出的CSS Sticky Footer。

Answer 2

看看这个：http://codepen.io/sheriffderek/pen/ziGbE

它是几个粘性页脚选项的组合 - 以及一些可选的javascript，可根据页脚的实际内容动态调整（在不同的屏幕尺寸下可能会有所不同）

创建一个粘性页脚

2 个答案: