1

I am still working on my site and I finally got the sticky footer to work. The next problem is that I want the columns to be filling up everything until the footer starts. No whitespace from the bottom of the columns to the top of the footer.

Here is my example

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

When you look at the sidebar on the left, I want the content and "sidebar rechts" to be the same. The CSS and HTML are all on the link above!

4

1 に答える 1

1

この質問の選択された回答から借りて、これを思いつきました：

jsフィドル

基本的に、列の背後には絶対位置に伸縮性のあるダミー要素があり、ブラウザー ウィンドウの高さに関係なく、背景色が常に空白を塗りつぶします。

私がコードに加えた他のさまざまな改善の中で、スティッキーフッター を実際にスティッキーにしました。これは、その上のコンテンツに適応するという点です。パネル ウィンドウのサイズを変更して観察します。

于 2012-05-21T21:25:32.967 に答える