CODEWITHSUNDEEP
csslayout
MazepiC
MazepiC

Reputation: 335

CSS to make two vertically stacked divs fill viewport when one is fixed height

I thought this would be fairly simple but I haven't been able to find a solution. I want a layout with 2 divs which fill the browser window. They would be 100% width and one on top of the other. The bottom div must have a fixed height and the top div would fill the rest of the space. I would like the solution to:

I have tried the following but the margin-bottom seems to have no effect so the two divs overlap (as illustrated by the semi-transparent backgrounds):

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body, html {
        height: 100%;   
    }
    #content {
        height: 100%;
        width: 100%;
        overflow: auto;
        background: rgba(255,0,0,0.5);
        margin-bottom: 40px;
    }
    #footer {
        width: 100%;
        height: 40px;
        position:absolute;
        bottom: 0;
        background: rgba(255,0,0,0.5);
    }
</style>
</head>
<body>
    <div id="content">
        <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>last line of content</p>
    </div>
    <div id="footer"></div>
</body>
</html>

JSFiddle

I have seen several solutions for sticky footers but they all seem to have the divs overlap. Is this as hard as it seems or am I missing something? Any insight would be greatly appreciated!

Upvotes: 0

Views: 2548

Answers (3)

Jason
Jason

Reputation: 901

Sticky footer is almost the same as sticky header.

Set #footer to position:static. May need to add left:0px;

Instead of margin-bottom use padding-bottom:40px for #content, then set box-sizing:border-box. Border-box includes padding (and borders, hence the name) in the total dimensions. Your divs will still overlap, so layer #footer tm with z-index:99; and #content with z-index:-1;. The padding will prevent a content overlap and a background for #footer will hide the rest.
If border-box fusses with your content too much, just add an inner div with border-box to adjust padding again.

Upvotes: 0

Douglas Tober
Douglas Tober

Reputation: 300

Try setting your footer and content to position: relative; and removing the margin-bottom:40px.

Upvotes: 0

lefoy
lefoy

Reputation: 1178

Did you try this?

* {
    margin: 0;
    padding: 0;
}
body, html {
    height: 100%;   
}
#content {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: auto;
    background: rgba(255,0,0,0.5);
    margin-bottom: 40px;
}
#footer {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    background: rgba(255,0,0,0.5);
}

http://jsfiddle.net/9Zhaa/5/

Upvotes: 2

Related Questions