1

ヘッダーとコンテンツを含む単純なWebページがあります。次のようになります。

<div id="wrap">
    <div id="header">
    </div>
    <div id="content">
    </div>
</div>

デフォルトでは、右側にスクロールバーがありますが、ヘッダーのスクロールバーを無効化/フリーズしたいのですが、コンテンツには残しておきます。javascrip/ jqueryまたはcssでこれを行うことはできますか？

ありがとう

前 ここに画像の説明を入力してください

後 ここに画像の説明を入力してください

4

5 に答える 5

2

これは、コンテンツに固定の高さを与え、 を設定することで実現できますoverflow-y: scroll。

例: http://jsfiddle.net/XLaVa/

于 2012-07-12T02:15:32.997 に答える
1

html/css を再構築する必要があります。

<div id='wrap'>
   <div id='header'></div>
   <div id='content-outer'>
      <div id='content-inner'>
      </div>
   </div>
</div>

CSS:

.content-outer {
   height: 600px; /* or desired height */
   overflow-y: scroll;
}
.content-inner {
   height: auto;
}
于 2012-07-12T02:13:42.807 に答える
0

コンテンツ要素自体にスクロールバーを追加する場合は、他の回答をご覧ください。ブラウザのスクロールバーを介して同様の効果を得るposition:fixedには、ヘッダーを試してください。

#header {
    position : fixed;
    top : 0px;
    width : 100%;
    height : 30px;
    background-color:white;
}
#content{
    margin-top : 30px;
}

デモ: http://jsfiddle.net/GUeUe/

(注: IE <=6 は をサポートしていませんposition:fixed。)

于 2012-07-12T02:30:13.840 に答える
0

ヘッダーとコンテンツoverflow:hiddenの CSS で設定します。overflow:scroll

于 2012-07-12T02:12:25.217 に答える
0

次の CSS ルールを追加します。

#header { overflow: hidden; }
#content { overflow: auto; }

また、ページ自体からはみ出さないように、コンテンツの高さを制限する必要があります。

于 2012-07-12T02:13:52.667 に答える