CODEWITHSUNDEEP
csscss-position
stuntbox
stuntbox

Reputation: 21

Fixed header, footer inside a flexible fixed-position container

What’s the cleanest way to achieve a fixed header/footer and scrollable area inside a flexible, fixed-position container? (Example: http://cl.ly/image/293F0f3D1R2B)

Assume container’s CSS is similar to: 

#modal {
    position: fixed;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

Upvotes: 1

Views: 1433

Answers (2)

stuntbox
stuntbox

Reputation: 21

Following up on this for anyone else who might need similar.

The simplest, CSS-only approach I've found is to position the scrollable area absolutely inside an absolute container, and set the top and bottom properties so it stretches to fill the available area. (For this to work, you need to know the height of the header and footer.)

Working example + demo here: http://codepen.io/stuntbox/pen/lEdpq

Upvotes: 1

CJdriver
CJdriver

Reputation: 458

Something like this?

I used position: absolute; instead of fixed though.

Upvotes: 2

Related Questions