CODEWITHSUNDEEP
htmlcss
Johann Behrens
Johann Behrens

Reputation: 124

Min-height in CSS and HTML

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!

Upvotes: 1

Views: 163

Answers (1)

user1108579
user1108579

Reputation: 2063

I borrowed from the chosen answer of this question and came up with this:

jsFiddle

Basically, there's absolutely-positioned, stretchy, dummy elements behind the columns so that no matter how tall the browser window is, their background color will always fill the whitespace.

Amongst the other various improvements I made to the code, I made the sticky footer actually sticky now, in that it adjusts to the content above it. Resize the panel window to observe.

Upvotes: 1

Related Questions