1

我仍在我的网站上工作，我终于让粘性页脚工作了。下一个问题是我希望列填充所有内容，直到页脚开始。从列底部到页脚顶部没有空格。

这是我的例子

html

<!DOCTYPE html>
<html>
<head>
    <title>In ontwikkeling!</title>

    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="css/basis.css" />
</head>

<body>
    <div id="menu">
        Menu
    </div>
    <div id="container">
        <div id="header">
            Header
        </div>
        <div id="sidebar-l">
            <div class="padding">
                Sidebar Links
            </div>
        </div>

        <div id="sidebar-r">
            <div class="padding">
                Sidebar Rechts
            </div>
        </div>

        <div id="content">
            <div class="padding">
                Content
            </div>
        </div>
    <div class="push"></div>
    </div>
    <div id="footer">
        Footer
    </div>
</body>
</html>

CSS

/* CSS-file behorend bij TNG */

html,body{
    margin:0;
    padding:0;
}

#menu{
    background-color:rgb(255,86,81);
    height:50px;
}

#container{
    width:1000px;
    margin:auto;
}

#header{
    background-color:rgb(224,17,80);
    height:150px;
}

#sidebar-l{
    background-color:rgb(141,171,242);
    width:280px;
    float:left;
    position:fixed;
    height:100%;
}

#sidebar-r{
    background-color:rgb(141,171,242);
    width:220px;
    float:right;
    height:100%;
}

#content{
    background-color:rgb(39,85,92);
    margin-left:280px;
    margin-right:220px;
}

#sidebar-l .padding, #sidebar-r .padding, #content .padding{
    padding:10px;
}

#footer{
    background-color:rgb(84,48,64);
    width:1400px;
    height:66px;
    left:50%;
    margin-left:-700px;
    bottom:0;
    position:fixed;
    clear:both;
}

.push{
    height:66px;
}

当您查看左侧的侧边栏时，我希望内容和“侧边栏权限”相同。CSS和HTML都在上面的链接上！

4

1 回答 1

1

我从这个问题的选择答案中借用并想出了这个：

jsFiddle

基本上，列后面有绝对定位的、可拉伸的、虚拟的元素，因此无论浏览器窗口有多高，它们的背景颜色总是会填满空白。

在我对代码进行的其他各种改进中，我使粘性页脚现在 实际上是粘性的，因为它会根据上面的内容进行调整。调整面板窗口的大小以进行观察。

于 2012-05-21T21:25:32.967 回答