1

誰でも私を助けることができますか？

私は何日も、そして多くのソースを試しました。しかし、私は答えを見つけることができます。

  • CSSで4 DIVを作成する必要があります。

  • ヘッダー div は 100px で、常に TOP にあります。

  • フッター div は 100px で、常に BOTTOM にあります (また、クライアント ブラウザーのサイズが変更された場合、常に下にあり、レイアウトは変更されません)。

  • 左の div は幅 200px (高さ: 自動塗りつぶし)

  • MAIN div は AUTO フィルの高さと幅です (オーバーフローはスクロール バーです)

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 に答える