How to make the content div scrollable without using javascript

Question

I have a simple page. Here i want a fixed header and a fixed footer and the body of the content to be scrollable.

HTML

<div class="container">
    <div class="header">This is Header</div>
    <div class="body">This is Body
        <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body
    <br/>This is Body</div>
    <div class="footer">This is Footer</div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    height: 100%;
    background: #DDD;
}

.header {
    width: 100%;
    height: 40px;
    background: red;
    position: absolute;
    top: 0;
}

.footer {
    width: 100%;
    height: 40px;
    background: green;
    position: absolute;
    bottom: 0;
}

.body {
    width: 100%;
    background: blue;
    overflow: auto;
}

However when i scroll, the whole page tends to scroll, making my header and footer move. I can resolve this using javascript, getting the height of the screen and subtracting the header and footer height.

But is there any way we can achieve this only using css. If yes then how ?

And 1 more point just need to make the div scrollable not the whole page — user2781125
– user2781125, Commented Sep 15, 2013 at 12:11

Ashis Kumar · Accepted Answer · 2013-09-15 12:07:56Z

3

Its very simple, just make changes as like this

.body {
    width: 100%;
    background: blue;
    overflow: auto;
    position: absolute;
    bottom: 40px;
    top: 40px;
}

Check this http://jsfiddle.net/rCV6E/1/

answered Sep 15, 2013 at 12:07

Ashis Kumar

6,5542 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ashis Kumar Over a year ago

Yes but make have some impact on the smoothness.

Ashis Kumar Over a year ago

you can watch this to improve the smoothness youtube.com/watch?v=QSoRsM5-4Z4

Ashwani · Accepted Answer · 2013-09-15 12:20:49Z

0

try to use css as:

.body {
    width: 100%;
    background: blue;
    overflow: scroll !important;
}

Set overflow to scroll and .header, .footer position to fixed.

edited Sep 15, 2013 at 12:20

answered Sep 15, 2013 at 12:08

Ashwani

3,4911 gold badge26 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to make the content div scrollable without using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related