1

任何人都可以帮助我吗？

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

  • 我需要通过 CSS 创建 4 DIV。

  • 标题 div 是 100px，并且总是在 TOP。

  • 页脚 div 为 100px，并且始终在 BOTTOM 中（另外，如果客户端浏览器调整大小，它始终在底部，不更改布局）

  • 左 div 宽度为 200px（高度：自动填充）

  • MAIN div 是自动填充高度和宽度（溢出是滚动条）

请帮我编写完整的代码 HTML、CSS 或 Javascript。因为，我不擅长 CSS...

请看这张照片： 例子

这是 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>

演示

4

1 回答 1

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;
}
于 2013-04-08T14:17:07.837 回答