CSS DIV AUTO填充高度和宽度（溢出是滚动条）

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. 我需要通过CSS创建4 DIV。
Header div is 100px, and always in TOP. 标头div为100像素，始终为TOP。
Footer div is 100px, and always in BOTTOM (also, if client browser resize, it always in Bottom, no change Layout) 页脚div为100像素，始终位于底部（此外，如果客户端浏览器调整大小，则始终位于底部，不更改布局）
Left div is Width 200px (Height: auto fill) 左div是宽度200像素（高度：自动填充）
MAIN div is AUTO fill Height and Width (overflow is Scroll bar) MAIN div为自动填充高度和宽度（溢出为滚动条）

Please, help me FULL CODE HTML, or CSS, or Javascript. 请帮我FULL CODE HTML，CSS或Javascript。 Because, I not good for CSS... 因为，我不太适合CSS ...

please, see this picture: 请看这张图片：

here is an example of the html, it's ok in FF but not IE 这是html的示例，在FF中可以，但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/ 试试这个http://jsfiddle.net/QXKtm/3/

HTML HTML

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

CSS 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填充高度和宽度（溢出是滚动条）

问题描述

1 个解决方案

解决方案1
1 2013-04-08 14:17:07

CSS DIV AUTO填充高度和宽度（溢出是滚动条）

问题描述

1 个解决方案

解决方案1 1 2013-04-08 14:17:07

解决方案1
1 2013-04-08 14:17:07