Question

我使用Bootstrap创建了一个简单的动态页面。它有一个粘性导航栏和一个粘性页脚。

我的导航栏，页脚和页面内容为黑色。
我希望主要内容区域是白色和＆amp;页面的两边是黑色的背景

我现在只能通过设置物理高度来实现这一点，而不是使用高度：100％;

有人可以通过查看我现有的代码来帮助，看看我做错了什么。

我认为我也没有正确使用'div push'的想法，因为我可以看到页面上的白色按钮。

<div id="push"></div>

Picture of desired Result - 当内容大于页面时，用户将滚动但页脚始终粘滞。我相信这已经有效了。

JSFiddle of my code

Bootstrap Sticky Footer with Sticky Nav Code

Answer 1

我想建议一种更简单的方法。仔细查看CSS，尤其是 position：fixed property / value。

如果您添加更多内容或缩小窗口，您将看到它根据需要滚动。这是我发现here的简化版本。

<html>
<head>
<title>Fixed Footer</title>
<style type="text/css">
    body{ margin:0px; padding:0px;background:black}

    #maincontent{
        width:500px;
        background:#fff;
        padding:20px 20px 0px 20px;
        margin:0px auto;
    }

    #footer{
        position:fixed;
        left:0px;
        bottom:0px;
        width:100%;
        background:#990000;
        line-height:30px;
        color:#fff;
    }
    #footer span{padding-left:20px;}
</style>
</head>

<body>
    <div id="maincontent">
    <h1>Fixierter Footer, nur mit CSS</h1>
    <p>Das Folgende Script macht genau das, nur halt im CSS alleine.</p>
    <p>Das Folgende Script macht genau das, nur halt im CSS alleine.</p>
    <p>Das Folgende Script macht genau das, nur halt im CSS alleine.</p>
    </div>
    <div id="footer"><span>Ich bin Footer, der immer hier unten bleibt :-)</span></div>
</body>

</html>

Answer 2

我认为push正好在footer之前，并且不需要在CSS中设置特定的高度..

http://jsfiddle.net/ugeVP/

HTML - 设置容器背景＆amp;身高@最低100％

2 个答案: