19

2セットのスクロールバーのないWebページでMSOffice2007リボンのように見える非スクロールdivをどのように作成しますか。1つはウィンドウ用、もう1つはdiv用です。

4

5 に答える 5

15

これを試して：

<!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、ヘッダーの下のスペースを埋めるサイズにdi​​vを設定することです。これは、ほとんどのブラウザで、topとbottom位置の両方を設定し、height未設定のままにしておくことで実現されます。その結果、divの上部はヘッダーの下に固定され、divの下部は常に画面の下部まで伸びます。

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

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

注：Doctypeを使用して、IEをquirksモードから抜け出す必要があります。

于 2008-11-03T15:20:45.263 に答える
8

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

<div>また、下にスクロールし始めるまで、スクロール コンテンツの開始点が fixed によって隠されないようにする必要が<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 番目の上余白は、必要に応じて調整する必要があることに注意してください。

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

于 2008-11-02T12:14:24.173 に答える
4

ここではおそらく CSS 純粋主義者に非難されるでしょうが、幅と高さが 100% のテーブルを使用することは、どのブラウザーでも機能し、ブラウザー固有の CSS ハックを必要としません。

于 2008-11-04T09:03:56.240 に答える
0

代わりに使用することもできます


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

ページの上部にある div を詰まらせますが、ページを下にスクロールするとそこにとどまります。

于 2008-11-02T12:52:16.467 に答える
0

Belugabob は、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"> ...
于 2008-11-03T11:40:11.200 に答える