web-dev-qa-db-ja.com

2セットのスクロールバーなしでHTMLページの上部に非スクロールdivを作成するには

2組のスク​​ロールバーがないWebページ上のMS Office 2007リボンのように見える非スクロールdivを作成するにはどうすればよいですか。 1つはウィンドウ用、もう1つはdiv用です。

htmlribbonnon-scrolling
19
Daniel

これを試して：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Fixed Header/Full Page Content</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body,
            div {
                margin: 0;
                padding: 0;
            }

            body {
                /* Disable scrollbars and ensure that the body fills the window */
                overflow: hidden;
                width: 100%;
                height: 100%;
            }

            #header {
                /* Provide scrollbars if needed and fix the header dimensions */
                overflow: auto;
                position: absolute;
                width: 100%;
                height: 200px;
            }

            #main {
                /* Provide scrollbars if needed, position below header, and derive height from top/bottom */
                overflow: auto;
                position: absolute;
                width: 100%;
                top: 200px;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div id="header">HEADER</div>
        <div id="main">
            <p>FIRST</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>MAIN</p>
            <p>LAST</p>
        </div>
<!--[if lt IE 7]>
        <script type="text/javascript">
            var elMain = document.getElementById('main');

            setMainDims();
            document.body.onresize = setMainDims;

            function setMainDims() {
                elMain.style.height = (document.body.clientHeight - 200) + 'px';
                elMain.style.width = '99%'
                setTimeout("elMain.style.width = '100%'", 0);
            }
        </script>
<![endif]-->
    </body>
</html>

基本的には、ボディからスクロールバーを削除し、ドキュメント内の要素にスクロールバーを適用しています。それは簡単です。トリックは、ヘッダーの下のスペースを埋めるために#main divのサイズを取得することです。これは、ほとんどのブラウザでtopとbottomの両方の位置を設定し、heightを未設定のままにすることで実現されます。その結果、divの上部はヘッダーの下に固定され、divの下部は常に画面の下部まで拡大されます。

もちろん、給与を確実に稼ぐために、常にIE6が存在します。バージョン7より前のIEは、矛盾する絶対位置から寸法を導き出しません。 Some people IEのcss式を使用してIE6のこの問題を解決しますが、これらの式は文字通り評価されますすべてのマウスムーブなので、サイズ変更イベントで#main divのサイズを変更し、条件付きコメントを使用して、JavaScriptのブロックを他のブラウザーから隠しています。

幅を99％に設定し、setTimeoutを100％に戻す行は、ウィンドウのサイズを変更するときに水平スクロールバーが時々表示される原因となるIE6の小さなレンダリングの奇妙さを修正します。

注：doctypeを使用して、IE互換モードから取得する必要があります。

15
Prestaul

固定位置の<div>要素を使用します。これは、幅が100％で高さがz-indexです。

また、別の<div>にこれを配置して適切に配置することにより、下にスクロールし始めるまで、スクロールコンテンツの開始が固定<div>によって隠されないようにする必要があります。

<body>
    <div style="position: fixed; top: 0px; width:100%; height: 100px;">
        HEader content goes here
    </div>
    <div style="margin-top: 100px;">
        Main content goes here
    </div>
</body>

最初の<div>の高さと2番目の上部マージンは、ニーズに合わせて調整する必要があることに注意してください。

追伸これはIE7では何らかの理由で機能しませんが、良い出発点であり、このテーマのバリエーションを思い通りに機能させることができると確信しています。

8
belugabob

私はおそらくCSS純粋主義者に打ちのめされますが、幅と高さが100％のテーブルを使用すると、どのブラウザでも機能し、ブラウザ固有のCSSハックは必要ありません。

4
Filini

ベルガボブは、あなたがしようとしているのは固定位置付けであるという正しい考えを持っています。これはIE 6ではサポートされていません。

私は このチュートリアル の下から例を変更しました。これは、すべての優れたブラウザに加えて、IE 6+をサポートし、必要な機能を実行するはずです。 IEを使用すると、スタイル宣言にJavaScriptを配置できるため、機能します。

<style type="text/css">
  div#fixme {
    width: 100%; /* For all browsers */
  }
  body > div#fixme {
    position: fixed; /* For good browsers */
  }
</style>

<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
  div#fixme {
    /* IE5.5+/Win - this is more specific than the IE 5.0 version */
    right: auto; bottom: auto;
    left: expression( ( 0 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
    top: expression( ( 0 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
  }
</style>
<![endif]>
<![endif]-->

<body>
  <div id="fixme"> ...
0
joelhardi

代わりに使用できます


<div style='position:absolute;top:0px:left:0px;'>Text</div>;

ページ上部のdivを妨害しますが、ページを下にスクロールしても、そこにとどまります。

0
Nikola Stjelja