7

私は1時間以上探していましたが、成功しませんでした。フレームセットをエミュレートする純粋な CSS の方法はありますか? つまり、本当にそれをエミュレートしています。上部と下部のブロックを固定する興味深いものをいくつか見つけましたが、コンテンツのスクロール バーは通常のブラウザー本体のスクロール バーです。フレームセットのように、コンテンツ ブロック専用のスクロールバーが必要です。

overflow: auto をコンテンツ領域の div に割り当て、固定の高さを設定することで機能させることができます。しかし、問題は、javascript を使用しないと、クライアント ブラウザーのウィンドウ サイズがわからないことです。そして、これにjavascriptを使用したくありません。一番上のブロックの高さが固定されているため、高さにパーセントを使用することもできません。下のブロックは、ブラウザ ウィンドウの高さに応じて拡大または縮小するブロックです。どんな助けでも感謝します。ありがとうございました！

4

3 に答える 3

1

マクロの答えは近いですが、うまくいきません。コンテンツがヘッダーに重なっています。

position: fixed;要するに、コンテンツではなくヘッダーに使用したいのです。これにより、ラッパーも不要になります。これは基本的なキックオフの例です。コピーして貼り付けて実行できます。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3433129</title>
        <style>
            body { 
                margin: 0;
                background: aqua;
            }
            #header {
                position: fixed;
                height: 120px;
                width: 100%;
                background: pink;
            }
            #content {
                padding-top: 120px; /* Should be the same as #header height */
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>Header</h1>
        </div>
        <div id="content">
            <p>Start of content.</p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p>End of content.</p>
        </div>
    </body>
</html>
于 2010-08-08T05:22:12.857 に答える
1

このようなものはどうですか？

HTML

<div id="header">
    <img src="logo.gif" alt="logo" />
    <h1 class="tagline">Oh em gee</h1>
</div>
<div id="content">
    <div id="content-offset">
        <p>This will be 100% of the screen height, BUT the content offset will have a top pixel margin which allows for your header. Set this to the pixel value of your header height.</p>
    </div>
</div>

CSS

body, html {
    margin: 0; padding: 0;
    height: 100%;
}
#header {
   height: 120px;
   position: fixed;
   top: 0;
   background: red;
   width: 100%;
}

#content {
    height: 100%;
    position: absolute;
    top: 0;
}
#content-offset {
    margin-top: 120px;
    background: aqua;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
}
于 2010-08-08T05:06:41.880 に答える
0

いいえ。上のブロックを固定 % サイズに設定しない限り、このウィンドウ サイズを取得するには JavaScript を使用する必要があると思います。たとえば、上のブロックを 10%、下のブロックを 90% にします。

于 2010-08-08T05:01:16.453 に答える