CSS DIV AUTO fill Height and Width (overflow is Scroll bar)

Question

Any one can HELP me ?

I tried many Days, and many source. But, I can find answer.

I need creat 4 DIV by CSS.
Header div is 100px, and always in TOP.
Footer div is 100px, and always in BOTTOM (also, if client browser resize, it always in Bottom, no change Layout)
Left div is Width 200px (Height: auto fill)
MAIN div is AUTO fill Height and Width (overflow is Scroll bar)

Please, help me FULL CODE HTML, or CSS, or Javascript. Because, I not good for CSS...

please, see this picture:

here is an example of the html, it's ok in FF but not IE

<html>
<body style="margin: 0; padding: 0;">
    <div style="position: absolute; background: #faa; height: 100px; top: 0px; width: 100%;">
        header
    </div>
    <div style="position: absolute; background: #afa; top: 100px; bottom: 100px; left: 0;
        width: 100px;">
        left
    </div>
    <div style="position: absolute; background: #afa; top: 100px; bottom: 100px; right: 0;
        width: 100px;">
        right
    </div>
    <div style="position: absolute; background: #faa; height: 100px; bottom: 0px; width: 100%;">
        footer
    </div>
    <div style="position: absolute; background: #aaf; bottom: 100px; left: 100px; top: 100px;
        right: 100px; overflow: auto;">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            <p>Aliquam tincidunt tempor
            velit quis volutpat. Nulla pharetra pulvinar arcu sed lacinia.</p>
            <p> Nulla ultrices aliquet
            sem, vitae commodo elit condimentum ut. Nulla consectetur facilisis nibh, et tempus
            purus pellentesque nec. Ut eu nibh ut arcu mattis luctus. </p>
            <p>Cras at interdum quam.
            Pellentesque imperdiet mi vitae felis sollicitudin iaculis. </p>
            <p>Maecenas accumsan tortor
            neque, at posuere felis. Quisque ultricies mi quis dolor pellentesque elementum.</p>
    </div>
</body>
</html>

demo

Answer 1

Try this http://jsfiddle.net/QXKtm/3/

HTML

<header></header>
<div id="container">
    <section id="menu"></section>
    <section id="content"></section>
</div>
<footer></footer>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

header, footer {
    width: 100%;
    height: 100px;
    position: fixed;
    background-color: red;
}

footer {
    bottom: 0;
}

header {
    top: 0;
}

#container {
    position: absolute;
    top: 100px;
    bottom: 100px;
    width: 100%;
}

#menu, #content {
    height: 100%;
    background-color: blue;

}

#menu {
    width: 200px;
    margin-left: 10px;
    float: left;
}

#content {
    margin: 0px 10px 0px 220px;
    width: auto;
}

CSS DIV AUTO fill Height and Width (overflow is Scroll bar)

Question

1 answers

solution1
1 2013-04-08 14:17:07

CSS DIV AUTO fill Height and Width (overflow is Scroll bar)

Question

1 answers

solution1 1 2013-04-08 14:17:07

solution1
1 2013-04-08 14:17:07