Question

任何人都可以帮助我？

我尝试过很多天，很多来源。但是，我可以找到答案。

我需要CSS创建4 DIV。
标题div为100px，始终位于TOP。
页脚div为100px，始终为BOTTOM （另外，如果客户端浏览器调整大小，它总是在底部，没有更改布局）
左边的div是宽度200px（高度：自动填充）
MAIN div是AUTO填充高度和宽度（溢出是滚动条）

请帮我完整代码HTML，CSS或Javascript。因为，我对CSS不好......

请看，这张图片： example

这里是一个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

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

1 个答案: