How to set div scrollable when content more than size of the page?

Question

I have the next page:

<div id = "menu">
    Menu on the left side
</div>
<div id = "header">
    Header content of the page
</div>
<div id = "body">
    Data Data Data Data Data Data Data 
</div>
<div id = "footer">
    Additional Information
</div>

Whith Next layout: Menu should be on the left side:

#menu{
    background: #244a7c;
    padding: 7px 23px 0 7px;
    width: 299px;
    height: 1000px;
    overflow: inherit;
    margin-left: 0px;
    display: block;
    float: left;
}
#header{
    display: inline-block;
    width: 400px;
    border-bottom: 1px solid rgb(238, 238, 238);
}

Body can have different data inside. My problem is:

When content of the body more than user page I want to fix all div except body. Menu should be on the left side, Header should be on the top of the page and footer on the bottom and ONLY body should be scrollable.

Any help, please.

Thanks!

Answer 1

Here's 2 Pure CSS solution

Without fixing any height (header/footer) or width (left column).

I actually prefer the second solution. (even tho he has less browser support)

1 - using CSS tricks

this is a totally responsive design and work well with all browsers (IE10, FF, Chrome, Safari, Opera, mobile browsers)

Working Fiddle

HTML:

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper Container Inverse">
            <div>
                <div class="Footer">
                </div>
            </div>
            <div class="HeightTaker">
                <div class="Wrapper">
                    <div class="LeftMenu">
                    </div>
                    <div class="Content">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

*
{
    margin: 0;
    padding: 0;
}
html, body, .Container
{
    height: 100%;
}
    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }
.HeightTaker
{
    position: relative;
    z-index: 1;
}
    .HeightTaker:after
    {
        content: '';
        clear: both;
        display: block;
    }
.Wrapper
{
    position: absolute;
    width: 100%;
    height: 100%;
}
.Inverse, .Inverse > *
{
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.LeftMenu
{
    height: 100%;
    float: left;
}
.Content
{
    overflow: auto;
    height: 100%;
}

/*For demonstration only*/
p
{    
    font-size: 1.3em;
}

.Important
{
    font-weight: bolder;
    color: white;
}

body > .Container
{
    text-align: center;
}

.Header
{
    background-color: #bf5b5b;
}
.LeftMenu
{
    background-color:  #bdbe4c;
}

.Content
{
    background-color: #90adc1;
}
.Footer
{
    background-color: #b5a8b7;
}

2 - using Flex

This layout can also be achieved using flex, but the current browser support is pure. Here's a Working Fiddle only FF,Chrome,IE10.

HTML: (simpler)

<header>
</header>
<section class="Middle">
    <div class="LeftMenu">
    </div>
    <div class="Content">
    </div>
</section>
<footer>
</footer>

CSS:

*
{
    margin: 0;
    padding: 0;
}
html, body
{
    height: 100%;
    text-align: center;
}

body
{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.Middle
{    
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 0;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    overflow: hidden;
}

.Content
{   
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 0 0;

    overflow: auto;
}

/*For demonstration only*/
p
{    
    font-size: 1.3em;
}

.Important
{
    font-weight: bolder;
    color: white;
}

header
{
    background-color: #bf5b5b;
}
.LeftMenu
{
    background-color:  #bdbe4c;
}

.Content
{
    background-color: #90adc1;
}
footer
{
    background-color: #b5a8b7;
}

Answer 2

If you set the header , footer & menu position as fixed & leave the body as it is, it should work. Only the body will be scrollable.

#header { 
    position: fixed;
    top: 0; 
    display: inline-block;
    width: 400px;
    border-bottom: 1px solid rgb(238, 238, 238);
}
#footer { 
    position: fixed;
    bottom: 0; 
}
#menu { 
    position: fixed; 
    left: 0; 
    background: #244a7c;
    padding: 7px 23px 0 7px;
    width: 299px;
    height: 1000px;
}
#body { 
    margin-left: 300px;
    margin-top: <header-height>;
    margin-bottom: <footer-height>;
}