CODEWITHSUNDEEP
javascripthtmlcss
Martin
Martin

Reputation: 157

Dynamic content that changes height depending on header and footer height

I'm trying to make a page that contains 3 elements: Header, footer and content. As the names suggest, I want the header stuck to the top, the footer in the bottom, and the content in between. I have already made a layout, which puts the header and footer where they are supposed to be, but the content either overlaps them, or the other way around, where the content is supposed to get smaller instead.

My problem is that the header and footer are going to be used for many different things, and they are therefore dynamic when it comes to height.

Is there any way to make the content fill what space is left between the header and footer, without overlapping any of them?

If possible I would prefer pure CSS, but if that isn't possible, I'd like a JavaScript suggestion as well. :)

Thanks!

EDIT: This is what I got atm.

<div class="container">
    <div id="header"></div>
    <div id="footer"></div>
    <div id="content"></div>
</div>

CSS:

#content {
    position:absolute;
    background: url('img/textures/fabric.png');
    background-color: gray;
    height:auto;
    width:auto;
    margin:0 auto 0 48px; /* Center content */
    left:0;
    right:0;
    top:0;
    bottom:0;
    text-align:center;  
}

#dashtop {
    position:fixed;
    width:auto;
    background-color:aqua;
    opacity: .5;
    margin-left: 48px;
    top:0;
    left:0;
    right:0;
    text-align:center;
}

#footer {
    position: fixed;
    margin-left: 48px;
    background-color:green;
    bottom:0;
    right:0;
    left:0;
    width:auto;
    height:auto;
    text-align:center;
    opacity:0.5;
    z-index:0;

}

Upvotes: 0

Views: 1466

Answers (1)

JohnB
JohnB

Reputation: 13713

Use relative positioning both for header and content (no position attribute), and use fixed positioning for the footer.

Upvotes: 1

Related Questions